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:
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:
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: