title: How to render a modal with map() from arraylist in react
body: <p>I have 9 buttons that I want to open a modal with that contain the data for each modal. For example, the Burgers button is clicked =&gt; burgers modal appears with the data from my arraylist, desserts button is clicked =&gt; desserts modal appears with the data from arraylist on desserts. The code I have is below but I get an error Objects are not valid as a React child (found: objects with keys {id, service, description (these are the keys in my arraylist) }). If you meant to render a collection of children, use an array instead.</p>
  <p>As you can see from the code below I have one button that is being rendered 9 times, per the arraylist. Also, I want to remove the arraylist from the services component and import the ArrayList from its own component because of how many lines it takes up. Tips on that would be great as well.</p>
  <p>There is a lot of Lorem Ipsum because that is how long the description for each service is.</p>
  <pre><code>        let filelist = [
    {&quot;id&quot;: 1, &quot;service&quot;: 'InHome Services', &quot;description&quot;: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
    ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys'},
    {&quot;id&quot;: 2, &quot;service&quot;: 'Consumer Direct', &quot;description&quot;: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '
  +    
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '},
  
    {&quot;id&quot;: 3, &quot;service&quot;: 'Private Duty Service', &quot;description&quot;: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
    
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '},
  
    {&quot;id&quot;: 4, &quot;service&quot;: 'Home-make Chore', &quot;description&quot;: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
    
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys'},
    {&quot;id&quot;: 5, &quot;service&quot;: 'Nursing Care Service', &quot;description&quot;:'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
    
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' },
    { &quot;id&quot;: 6, &quot;service&quot;: 'Respite Care Service', &quot;description&quot;: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
    
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '},
  
    {&quot;id&quot;: 7, &quot;service&quot;: 'ASL Care Service', &quot;description&quot;: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
    
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '},
  
    {&quot;id&quot;: 8, &quot;service&quot;: 'Advance Care', &quot;description&quot;: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys'
  +
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industryse' +
    
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '},
  
    {&quot;id&quot;: 9, &quot;service&quot;: 'Healthy Children', &quot;description&quot;: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' + 
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
    
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
  
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '}
  ];
  
  export default function Services() {
    const [showModal, setShowModal] = useState();
    const [selectedFile, setSelectedFile] = useState();
  
    const handleClose = () =&gt; setShowModal(false);
    const handleCancel = () =&gt; {
      setShowModal(false);
      setSelectedFile(null);
    };
    const handleDelete = () =&gt; {
      setShowModal(false);
      //delete
      alert(`${selectedFile} has been deleted`);
      setSelectedFile(null);
    };
      return(
      &lt;div className=&quot;App&quot; style={{ marginTop: &quot;222px&quot; }}&gt;
        {filelist.map((file =&gt; {
          return (
            &lt;div&gt;
              &lt;Button
                style={{ margin: &quot;2px&quot; }}
                onClick={() =&gt; {
                  setSelectedFile(file);
                  setShowModal(true);
                }}
              &gt;
                
                {file}
              &lt;/Button&gt;
            &lt;/div&gt;
          )
          }))
        }
  
        &lt;Modal show={showModal} onHide={handleClose}&gt;
          &lt;Modal.Header closeButton&gt;
            &lt;Modal.Title&gt;
              Are you sure you want to delete {selectedFile}?
            &lt;/Modal.Title&gt;
          &lt;/Modal.Header&gt;
          &lt;Modal.Footer&gt;
            &lt;Button variant=&quot;secondary&quot; onClick={handleCancel}&gt;
              Close
            &lt;/Button&gt;
            &lt;Button variant=&quot;primary&quot; onClick={handleDelete}&gt;
              Yes
            &lt;/Button&gt;
          &lt;/Modal.Footer&gt;
        &lt;/Modal&gt;
      &lt;/div&gt;
      );
  }
  </code></pre>