Reputation: 41
It's HomePage component of react js
import React from 'react';
import axios from 'axios';
import { useState, useEffect } from 'react';
import { useNavigate,useParams } from 'react-router-dom';
import { Main } from '../components/Main';
import { Controls } from '../components/Controls';
import { ALL_COUNTRIES } from '../config';
import { List } from '../components/List';
import { Card } from '../components/Card';
import { Details } from './Details';
export const HomePage = () => {
const [countries,setCountries] = useState([]);
const navigate = useNavigate();
useEffect(() => {
axios.get(ALL_COUNTRIES).then(({data})=>setCountries(data))
},[]);
return (
<>
<Controls/>
<List>
{
countries.map((c)=>
{
const countryInfo={
img:c.flags.png,
name:c.name,
info: [
{
title:'Population',
description:c.population.toLocaleString(),
},
{
title:'Region',
description:c.region,
},
{
title:'Flag',
description:c.capital,
},
],
};
return <Card key={c.name} onClick={(e)=>{navigate('/country/${c.name}')}}
{...countryInfo}/>
})
}
</List>
</>
);
};
It's second components Details
export const Details = ({match}) => {
return (
<div>
Details {match.param.name}
<div/>
);
};
[https://i.sstatic.net/KUyrA.png][before]
HomePage itself looks like this but when i click on flag/card it sends me on second page as expected but gives me this error [https://i.sstatic.net/JqEHm.png][after]
also i'm using react-router-domV6 and this API https://restcountries.com/v2/all also both Components are in
Upvotes: 2
Views: 67