Uncaught Error: Info(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null [closed]

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>
   );
  }; 

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