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

Question

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 1

@ben, It looks like you are not using the talents array items you are mapping. The Arrow function that you are passing to the map function is called for each item in the array, with the first parameter being the item and the next one being the key.

You are not using the item. Take an example of some talents below...(they can be anything you want)

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

Answer 2

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.

Answer 3

You missed the return before the map.

const renderTalents = () => {

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