Map is not rendering ReactJs PROPS

Question

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?

Answer 1

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

Answer 2

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;