Build a React.js Select Dropdown List of All Countries Names in World Using JSX & Node.js

To build a React.js select dropdown list of all country names in the world using JSX and Node.js, follow these steps:

Step 1: Set up a new React.js project.

Create a new directory for your project, navigate to it in a terminal, and run the following command to create a new React.js project:

npx create-react-app country-dropdown

Step 2: Install the required dependencies.

Navigate to the project directory and install the necessary dependencies by running the following command:

cd country-dropdown

npm i axios

Step 3: Create a Node.js server to fetch country data.

Create a new file named server.js in the root directory of your project and add the following code:

const express = require('express');
const axios = require('axios');

const app = express();

app.get('/countries', async (req, res) => {
  try {
    const response = await axios.get('https://restcountries.com/v2/all');
    const countries = response.data.map((country) => country.name);
    res.json(countries);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Failed to fetch country data' });
  }
});

const port = process.env.PORT || 3001;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

const express = require('express');

const axios = require('axios');

const app = express();

app.get('/countries', async (req, res) => {

try {

const response = await axios.get('https://restcountries.com/v2/all');

const countries = response.data.map((country) => country.name);

res.json(countries);

} catch (error) {

console.error(error);

res.status(500).json({ error: 'Failed to fetch country data' });

}

});

const port = process.env.PORT || 3001;

app.listen(port, () => {

console.log(`Server is running on port ${port}`);

});

In the code above, we require the express and axios modules. We create an Express server and define a single route /countries to fetch the country data.

When the /countries endpoint is accessed, we use the axios library to make a GET request to the REST Countries API (https://restcountries.com/v2/all). We then extract the country names from the response data and send them as a JSON response.

Step 4: Modify the React.js app.

Replace the contents of the src/App.js file in your React.js project with the following code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [countries, setCountries] = useState([]);

  useEffect(() => {
    const fetchCountries = async () => {
      try {
        const response = await axios.get('/countries');
        setCountries(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchCountries();
  }, []);

  return (
    <div className="App">
      <h1>Select Country</h1>
      <select>
        {countries.map((country, index) => (
          <option key={index} value={country}>
            {country}
          </option>
        ))}
      </select>
    </div>
  );
}

export default App;

import React, { useState, useEffect } from 'react';

import axios from 'axios';

function App() {

const [countries, setCountries] = useState([]);

useEffect(() => {

const fetchCountries = async () => {

try {

const response = await axios.get('/countries');

setCountries(response.data);

} catch (error) {

console.error(error);

}

};

fetchCountries();

}, []);

return (

<h1>Select Country</h1>

{countries.map((country, index) => (

{country}

</option>

))}

</select>

</div>

);

}

export default App;

In the code above, we import the necessary modules, including the axios library for making HTTP requests.

Inside the App component, we define a state variable countries using the useState hook to store the fetched country data.

We use the useEffect hook to fetch the country data when the component mounts. In the fetchCountries function, we make a GET request to the /countries endpoint of our server (axios.get('/countries')). Upon receiving the response, we update the countries state variable using the setCountries function.

The <select> element is rendered with options dynamically generated from the countries state. Each country name is mapped to an <option> element with a unique key and value set to the country name.

Step 5: Start the development server.

In the terminal, run the following command to start the development server: