¿Cómo renderizo un componente para cada objeto en una matriz?

Question

Tengo un componente funcional. Tengo una variedad de objetos.

const talents = [{...}, {...}]

También devuelvo los siguientes componentes:

      <Card>
    <Accordion>
      <Card >
        <Accordion.Toggle
          as={Card.Header}
          eventKey="0"
        >
          some title
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="0">
          <Card.Body>
            <Container>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
            </Container>
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
    <Link to="/home">
      <Button>
        Home
      </Button>
    </Link>
  </Card>

Lo que estoy tratando de hacer es devolver el componente Accordion para cada objeto de la matriz.

Lo que he intentado hasta ahora.

En el componente de la tarjeta ejecuté un mapa () en la matriz:

<Card>
{talents.map(()=> {
return (
<Accordion>
  <Card >
    <Accordion.Toggle
      as={Card.Header}
      eventKey="0"
    >
      some title
    </Accordion.Toggle>
    <Accordion.Collapse eventKey="0">
      <Card.Body>
        <Container>
          <div>title</div>
          <p>words</p>
          <div>title</div>
          <p>words</p>
          <div>title</div>
          <p>words</p>
          <div>title</div>
          <p>words</p>
        </Container>
      </Card.Body>
    </Accordion.Collapse>
  </Card>
</Accordion>
)
})}

<Link to="/home">
  <Button>
    Home
  </Button>
</Link>
</Card>

No pasa nada.

También intenté crear una función que se asigne a través de la matriz y devuelva el jsx, y luego simplemente ejecuté la función dentro del componente de la tarjeta, así:

const renderTalents = () => {

talents.map(() => (
        <Accordion>
      <Card >
        <Accordion.Toggle
          as={Card.Header}
          eventKey="0"
        >
          some title
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="0">
          <Card.Body>
            <Container>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
            </Container>
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
))
}

Luego ejecuté la función en el componente de la tarjeta de esta manera:

<Card>
renderTalents()
</Card>

Una vez más, no pasa nada.

También envolvió la función en {}:

<Card>
{renderTalents()}
</Card>

Nada.

Answer 1

Si talentsestá vacío, siempre obtendrá un resultado en blanco de talents.map().

var arr1 = [];

console.log("Results: |" + arr1.map(()=>{}).join('') + "|");

No olvide que console.log(object)también mostrará el resultado del objeto al final del tiempo de ejecución, y no en el momento en que se llama. Puede evitar eso console.log(JSON.stringify(object)), si no hay referencias recursivas.

Answer 2

@ben, parece que no está utilizando los talentselementos de la matriz que está mapeando. La función de flecha que está pasando a la función de mapa se llama para cada elemento de la matriz, siendo el primer parámetro el elemento y el siguiente la clave.

No estás usando el artículo. Tome un ejemplo de algunos talentos a continuación ... (pueden ser cualquier cosa que desee)

const talents = [
  {title: 'React', skill: 'Expert'},
  {title: 'React Native', skill: 'Pro'},
  {title: 'Public Speaking', skill: 'Novice'},
];

// So mapping over talents would result it
const renderTalents => talents.map(({
  title, skill
}) => (
  <Accordion key={title}>
    <Card >
      <Accordion.Toggle
        as={Card.Header}
        eventKey="0"
      >
        {title}
      </Accordion.Toggle>
      <Accordion.Collapse eventKey="0">
        <Card.Body>
          <Container>
            <div>{skill}</div>
          </Container>
        </Card.Body>
      </Accordion.Collapse>
    </Card>
  </Accordion>
));