title: How can I dynamically display what appears in the modal
body: <p>The type of food selected shows up in the modal successfully upon clicking the appropriate button if I write in between <code>&lt;Modal&gt;</code></p>
  
  <pre><code>&lt;p&gt;{this.state.cTaco}&lt;/p&gt;
  &lt;p&gt;{this.state.bTaco}&lt;/p&gt;
  &lt;p&gt;{this.state.cBurrito}&lt;/p&gt;
  </code></pre>
  
  <p>But instead of writing it out 1 by 1, I want it to display dynamically using some sort of map or loop.  </p>
  
  <p>With my current code, it's displaying all the names of the items in the object on the modal and not the actual food name.</p>
  
  <pre><code>cTacoClicked
  
  cTaco
  
  bTacoClicked
  
  bTaco
  
  cBurritoSelected
  
  cBurrito
  </code></pre>
  
  <p>It should display (again, it does display it like this if I write out the states 1 by 1): </p>
  
  <pre><code>Chicken Taco
  
  Beef Taco
  
  Chicken Burrito
  </code></pre>
  
  <p>How can I correctly use a loop to make this happen dynamically.  </p>
  
  <p>Here's my code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import Modal from 'react-modal';
  
  import Aux from '../../../../hoc/Aux';
  import FoodButton from '../FoodButtons/FoodButton';
  import CheckoutButton from '../CheckoutButton/CheckoutButton';
  import axios from '../../../../axios-foodChosen';
  
  import { CLOSE_MODAL, OPEN_MODAL } from "../../../../store/action/NoNameAction";
  
  class TacoTypes extends Component {
      state = {
          items: {
              cTacoClicked: false,
              cTaco: '',
  
              bTacoClicked: false,
              bTaco: '',
  
              cBurritoSelected: false,
              cBurrito: ''
          }
      }
  
      componentWillMount() {
          // for modal
          Modal.setAppElement('body');
      }
  
      chickenTaco() {
          // modal
          const cTacoSelected = "Chicken Taco";
          this.setState({cTacClicked: true, cTaco: cTacoSelected});
      }
  
      beefTaco() {
          // modal
          const bTacoSelected = "Beef Taco";
          this.setState({bTacoClicked: true, bTaco: bTacoSelected});
      }
  
      chickenBurrito() {
          // modal
          const cBurritoSelected = "Chicken Burrito";
          this.setState({cBurritoSelected: true, cBurrito: cBurritoSelected });
      }
  
      render() {
          return (
              &lt;Aux&gt;
                  &lt;FoodButton clicked={() =&gt; this.chickenTaco()} label={"Chicken Taco"}/&gt;
                  &lt;FoodButton clicked={() =&gt; this.beefTaco()} label={"Beef Taco"}/&gt;
                  &lt;FoodButton clicked={() =&gt; this.chickenBurrito()} label={"Chicken Burrito"}/&gt;
  
                  &lt;CheckoutButton clicked={() =&gt; this.props.openModalRedux()}/&gt;
  
                  &lt;Modal isOpen={this.props.isOpen}&gt;
                      &lt;p&gt;
                          {
                              Object.keys(this.state.items).map(i =&gt; (
                                  &lt;p&gt;{i}&lt;/p&gt;
                              ))
                          }
                      &lt;/p&gt;
                      &lt;button onClick={() =&gt; this.props.closeModalRedux()}&gt;Close&lt;/button&gt;
                  &lt;/Modal&gt;
              &lt;/Aux&gt;
          );
      }
  }
  
  const mapStateToProps = state =&gt; {
      return {
          // props for modal
          isOpen: state.global.isModalOpen,
      }
  };
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          // Modal handlers
          openModalRedux: () =&gt; dispatch({type: OPEN_MODAL}),
          closeModalRedux: () =&gt; dispatch({type: CLOSE_MODAL})
      }
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(TacoTypes);
  </code></pre>