Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

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

Posted on May 16, 2023

 

 

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:

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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:

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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;

 

 

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:

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme