Problem is that it didn’t upload card page when i click
https://i.stack.imgur.com/Ep4J8.png
Main page /Homepage looks like that
https://i.stack.imgur.com/yC77U.png
i suscpect problem lies here {countries && <Info {…countries} />} It may due to {…countries} not working properly buy the way thanks in advance for your help Info.jsx
import React from 'react';
import styled from 'styled-components';
import axios from 'axios';
import {useState, useEffect} from 'react';
import { filterByCode } from '../config';
const Wrapper = styled.section`
margin-top: 3rem;
width: 100%;
display: grid;
grid-template-columns: 100%;
gap: 2rem;
@media (min-width: 767px) {
grid-template-columns: minmax(100px, 400px) 1fr;
align-items: center;
gap: 5rem;
}
@media (min-width: 1024px) {
grid-template-columns: minmax(400px, 600px) 1fr;
}
`;
const InfoImage = styled.img`
display: block;
width: 100%;
height: 100%;
object-fit: contain;
`;
const InfoTitle = styled.h1`
margin: 0;
font-weight: var(--fw-normal);
`;
const ListGroup = styled.div`
display: flex;
flex-direction: column;
gap: 2rem;
@media (min-width: 1024px) {
flex-direction: row;
gap: 4rem;
}
`;
const List = styled.ul`
list-style: none;
margin: 0;
padding: 0;
`;
const ListItem = styled.li`
line-height: 1.8;
& > b {
font-weight: var(--fw-bold);
}
`;
const Meta = styled.div`
margin-top: 3rem;
display: flex;
gap: 1.5rem;
flex-direction: column;
align-items: flex-start;
& > b {
font-weight: var(--fw-bold);
}
@media (min-width: 767px) {
flex-direction: row;
align-items: center;
}
` ;
const TagGroup = styled.div`
display: flex;
gap: 1rem;
flex-wrap: wrap;
`;
const Tag = styled.span`
padding: 0 1rem;
background-color: var(--colors-ui-base);
box-shadow: var(--shadow);
line-height: 1.5;
cursor: pointer;
`;
export const Info=(props)=>{
const {
name,
nativeName,
flag,
capital,
population,
region,
subregion,topLevelDomain,currencies=[],languages=[],borders=[],push,
}=props;
const [neighbors, setNeighbors] = useState([]);
useEffect(() => {
if (borders.length)
axios.get(filterByCode(borders))
.then(({ data }) => setNeighbors(data.map((c) => c.name)));
}, [borders]);
<Wrapper>
<div>
<InfoImage src={flag} alt={name}/>
<div>
<InfoTitle>{name}</InfoTitle>
</div>
<ListGroup>
<List>
<ListItem>
<b>Population:</b>{population}
</ListItem>
</List>
<List>
<ListItem>
<b>Region:</b>{region}
</ListItem>
</List>
<List>
<ListItem>
<b>Subregion:</b>{subregion}
</ListItem>
</List>
<List>
<ListItem>
<b>Capital:</b>{capital}
</ListItem>
</List>
<List>
<ListItem>
<b>Top Level Domain:</b>{topLevelDomain.map((d)=>(<span key={d}>{d} </span>))}
</ListItem>
</List>
<List>
<ListItem>
<b>Currencies:</b>{currencies.map((c)=>(<span key={c.code}>{c.name} </span>))}
</ListItem>
</List>
<List>
<ListItem>
<b>Languages:</b>{languages.map((l)=>(<span key={l.name}>{l.name} </span>))}
</ListItem>
</List>
</ListGroup>
<Meta>
<b>Border Countries</b>
{!borders.length ? (
<span>There is no border countries</span>
) : (
<TagGroup>
{neighbors.map((b) => (
<Tag key={b} onClick={() => push(`/country/${b}`)}>
{b}
</Tag>
))}
</TagGroup>
)}
</Meta>
</div>
</Wrapper>
};
Details.jsx
import axios from 'axios';
import { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { IoArrowBack } from 'react-icons/io5';
import { searchByContry } from '../config';
import { Button } from '../components/Button';
import { Info } from '../components/Info';
export const Details = () => {
const { name } = useParams();
const navigate = useNavigate();
const [countries,setCountries]=useState(null);
useEffect(() => {
axios.get(searchByContry(name)).then(({ data})=>setCountries(data[0]));
},[name])
return (
<div>
<Button onClick={() => navigate(-1)}><IoArrowBack />Back</Button>
{countries && <Info {...countries} />}
</div>
);
};
Advertisement
Answer
you missed return in your Info component
you have to do like this
return(
<Wrapper>
<div>
<InfoImage src={flag} alt={name}/>
<div>
<InfoTitle>{name}</InfoTitle>
</div>
<ListGroup>
<List>
<ListItem>
<b>Population:</b>{population}
</ListItem>
</List>
<List>
<ListItem>
<b>Region:</b>{region}
</ListItem>
</List>
<List>
<ListItem>
<b>Subregion:</b>{subregion}
</ListItem>
</List>
<List>
<ListItem>
<b>Capital:</b>{capital}
</ListItem>
</List>
<List>
<ListItem>
<b>Top Level Domain:</b>{topLevelDomain.map((d)=>(<span key={d}>{d} </span>))}
</ListItem>
</List>
<List>
<ListItem>
<b>Currencies:</b>{currencies.map((c)=>(<span key={c.code}>{c.name} </span>))}
</ListItem>
</List>
<List>
<ListItem>
<b>Languages:</b>{languages.map((l)=>(<span key={l.name}>{l.name} </span>))}
</ListItem>
</List>
</ListGroup>
<Meta>
<b>Border Countries</b>
{!borders.length ? (
<span>There is no border countries</span>
) : (
<TagGroup>
{neighbors.map((b) => (
<Tag key={b} onClick={() => push(`/country/${b}`)}>
{b}
</Tag>
))}
</TagGroup>
)}
</Meta>
</div>
</Wrapper>
)