How do I render a component for each object in an array?

I have a functional component. I have an array of objects.

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

I also return the following components:

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

What I am trying to do is return the Accordion component for every object in the array.

What ive tried so far.

In the card component i ran a map() on the array:

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

Nothing happens.

I also tried to create a function that maps throught the array and returns the jsx, and then just run the function inside the card component, like this:

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

Then i ran the function in card component like this:

<Card>
renderTalents()
</Card>

Again, nothing happens.

Also wrapped the function in {}:

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

Nothing.

Answer

If talents is empty, then you will always get a blank result from talents.map().

var arr1 = [];

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

Don’t forget that console.log(object) will show the result of the object at the end of runtime, too, and not at the moment it is called. You can get around that with console.log(JSON.stringify(object)), if there are no recursive references.

Advertisement

Answer