Map is not rendering ReactJs PROPS-CodePudding

map is not rendering, I created an array in a component and used props to access, but it's not rendering, someone could help me?

import React from "react";
import poke from '../../assets/poke.png';
import { CardProjetos } from './PortfolioStyled';

    const Portfolio = () => {
      const projects = [
        {
            id: 1,
            image: poke,
            title: 'Pokedex',
            description: ' React com axios para requisição de API do pokemon para listar os pokemons e mostrar tela com detalhes pelo ID',

        }, 
        {
          id: 2,
          image: poke,
          title: 'Test',
          description: 'test is not rendering',

      }
    ]
    return (
          <div>
            <CardProjetos itens={projects} />
          </div>

    )
    }

  export default Portfolio;






const Projetos = ({itens}) => {

  return ( 
    <>
    {itens.map((item) => (
    <div>
          <h1>{item.title}</h1>
          <h1>{item.description}</h1>
    </div>
))}
    </>
   )
}



export default Projetos;

I tried a lot of things, but it simply doesnt render. The page is blank. I put two codes, the first one I created an array The second is to use this value. I think it's something simple, but I'm not seeing it. Could some one help me?

CodePudding user response：

The components you are passing the itens prop to is called CardProjectos which you are importing on line 3. Projectos as far as I can see is declared but never called within the same file.

You can check this sandbox if it helps: https://codesandbox.io/s/headless-surf-57se9s?file=/src/Portofolio.js

CodePudding user response：

import React from "react";
import poke from '../../assets/poke.png';
import { CardProjetos } from './PortfolioStyled';

const Portfolio = () => {
    const projects = [
        {
            id: 1,
            image: poke,
            title: 'Pokedex',
            description: ' React com axios para requisição de API do pokemon para listar os pokemons e mostrar tela com detalhes pelo ID',

        }, 
        {
          id: 2,
          image: poke,
          title: 'Test',
          description: 'test is not rendering',

      }
    ]
    return ( <CardProjetos items={projects} /> )
}

export default Portfolio;


const Projetos = ({items}) => {

  return (
      {
          items.map((item, index)=>{
              return (
              <div key={index} >
                <h1>{item.title}</h1>
                <h1>{item.description}</h1>
              </div>
              )
          })
      }
   )
}



export default Projetos;