title: Toggle component with mapped data
body: <p>I'm creating a component with a view that can be opened and closed like an accordion. The data for the view comes from this JSON file:</p>
  <pre><code>{
    &quot;tracks&quot;: [
      {
        &quot;uid&quot;: &quot;001&quot;,
        &quot;line_number&quot;: &quot;S123456&quot;,
        &quot;feed&quot;: [
          {
            &quot;line_number&quot;: &quot;S123456&quot;,
            &quot;outer_situation&quot;: &quot;low&quot;,
            &quot;departure_time&quot;: &quot;2020-04-21T10:55Z&quot;
          },
          {
            &quot;line_number&quot;: &quot;S123456&quot;,
            &quot;outer_situation&quot;: &quot;high&quot;,
            &quot;departure_time&quot;: &quot;2020-04-21T10:55Z&quot;
          },
          {
            &quot;line_number&quot;: &quot;S123456&quot;,
            &quot;departure_time&quot;: &quot;2020-04-21T10:55Z&quot;
          }
        ]
      },
      {
        &quot;uid&quot;: &quot;002&quot;,
        &quot;line_number&quot;: &quot;S00000&quot;,
        &quot;feed&quot;: [
          {
            &quot;line_number&quot;: &quot;S123456&quot;,
            &quot;outer_situation&quot;: &quot;low&quot;,
            &quot;departure_time&quot;: &quot;2020-04-21T10:55Z&quot;
          },
          {
            &quot;line_number&quot;: &quot;S123456&quot;,
            &quot;outer_situation&quot;: &quot;high&quot;,
            &quot;departure_time&quot;: &quot;2020-04-21T10:55Z&quot;
          },
          {
            &quot;line_number&quot;: &quot;S123456&quot;,
            &quot;outer_situation&quot;: &quot;high&quot;,
            &quot;departure_time&quot;: &quot;2020-04-21T10:55Z&quot;
          }
        ]
      }
    ]
  }
  
  </code></pre>
  <p>Each &quot;track&quot; represents a row, so there could be unlimited numbers of rows.
  When my row is closed, it the map looks like this:</p>
  <pre><code>&lt;div&gt;
              {connex.map((tracks) =&gt; (
                &lt;div
                  className={style.connection_container}
                  onClick={() =&gt; setShowConnections(!showConnections)}
                  onKeyPress={() =&gt; setShowConnections(!showConnections)}
                  role=&quot;button&quot;
                  tabIndex=&quot;0&quot;
                &gt;
  
                  &lt;div span={1}&gt;
                  &lt;/div&gt;
                  &lt;div span={3}&gt;
                    &lt;div className={style.vehicle_id}&gt;
                      &lt;p&gt;{tracks.line_number}&lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div span={6}&gt;
                    &lt;span className={style.location_text}&gt;
                    {tracks.origin}
                    &lt;/span&gt;
                    &lt;span&gt; - &lt;/span&gt;
                    &lt;span className={style.location_text}&gt;
                      {tracks.destination}
                    &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div span={8}&gt;
                    &lt;div className={style.stop_point}&gt;
                      &lt;p&gt;{tracks.stop_point}&lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div span={6}&gt;
                    &lt;span className={style.stop_point}&gt;
                      &lt;p&gt;{tracks.arrival_time}&lt;/p&gt;
                    &lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              ))}
            &lt;/div&gt;
  </code></pre>
  <p>Before adding mapped JSON data, I was using  with the information that would be included after I created the JSON, so the original toggle function works fine. However, now as I am trying to add a .map function inside of the opened view, I am doing something wrong in the syntax and I cannot figure out what it is.
  <a href="https://stackblitz.com/edit/react-lnpfvu" rel="nofollow noreferrer">https://stackblitz.com/edit/react-lnpfvu</a>
  error: <code>JSX expressions must have one parent element.</code></p>
  <p>Since I already have a condition for displaying data, is there a better way I can create this toggle component that would simplify how I access data?</p>