title: React: Getting props from multiple arrays using .map
body: <p>I'm building an ERP-style app using MERN and Redux. My backend is working well, I can add  things through my API and all, but I'm having some stupid issues with my front-end.</p>
  <p>The idea is that I have item-objects and want to access them through a modal. The modal itself works, and the button used to open the modal actually gets the names of the objects through the loop.</p>
  <p>The issue comes in inside the <code>ModalBody</code> - it only fetches the information from the first object in the table. I've tried methods such as <code>this.props.customer</code>, <code>items.customer</code>, <code>this.items.customer</code> and many, many more without success.</p>
  <p>It would be cool if I can export the component as a class too, but if it's impossible, that's okay I guess.</p>
  <p>Do you guys have any idea on how I can make it work?</p>
  <pre class="lang-reactjs prettyprint-override"><code>render(){
    const { items } = this.props.item;
  
    return (
      &lt;Container&gt;
        &lt;ListGroup&gt;
          &lt;TransitionGroup className=&quot;shopping-list&quot;&gt;
            {items.map(({ _id, name, customer, location, dilemma }) =&gt;
              &lt;CSSTransition key={_id} timeout={500} classNames=&quot;fade&quot;&gt;
                &lt;ListGroupItem key={_id}&gt;
                  &lt;Button color=&quot;light&quot; style={{ width: &quot;100%&quot; }} onClick={this.toggle}&gt;{name}&lt;/Button&gt;
                  &lt;Modal isOpen={this.state.modal} toggle={this.toggle}&gt;
                    &lt;ModalHeader toggle={this.toggle} key={_id}&gt;{name}&lt;/ModalHeader&gt;
                    &lt;ModalBody key={index}&gt;
                      &lt;p&gt;Customer: {customer}&lt;/p&gt;
                      &lt;p&gt;Location: {location}&lt;/p&gt;
                      &lt;p&gt;Dilemma: {dilemma}&lt;/p&gt;
                    &lt;/ModalBody&gt;
                  &lt;/Modal&gt;
                &lt;/ListGroupItem&gt;
              &lt;/CSSTransition&gt;
            )}
          &lt;/TransitionGroup&gt;
        &lt;/ListGroup&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>