title: Map method for multiple indexed array values for react
body: <ul>
  <li>I used first index filtered array value results and rendered them based on different criteria</li>
  <li>I am struck how to use map all the index values of the filtered array values and render it on UI</li>
  <li>can you guys help me to solve issue with your suggestions</li>
  <li>The entire code is available in the stackblitz and its link: <a href="https://stackblitz.com/edit/react-geum6v?file=index.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-geum6v?file=index.js</a></li>
  <li>code snippet for one user filtered value and tried multiple index array values are been provided below:</li>
  <li>can you let me know where I did mistake in execution multiple indexed array values for the map method</li>
  </ul>
  
  <p>index.js (JS part)</p>
  
  <pre><code>sportsZipSearch = () =&gt; {
      const { zip1, dob1, age1, state1, check, count } = this.state;
  
      const newArray = students.filter((el) =&gt; { return ((el.zip === zip1) &amp;&amp; (parseInt(el.Age) &lt;= parseInt(age1[Object.keys(age1)[0]])) || (el.sports_state != (state1)) &amp;&amp; check ) });
      const newArray1 = newArray[0].Sports_games.map((el1) =&gt; { return Object.keys(el1) });
      //const sorted = newArray1[Object.keys(newArray1)].sort();
      console.log(age1);
      console.log(zip1);
      console.log("here--", this.state.zip1, this.state.age1);
      console.log(newArray);
      console.log(newArray1);
      //console.log(sorted);
      console.log(newArray.Subjects);
      console.log(count);
      this.setState({ result: newArray, zipValue: true })
    }
  </code></pre>
  
  <p>index.js (html part)</p>
  
  <pre><code>Show list Sports: {result.length &amp;&amp; result[0].Sports_games.map(g =&gt; { var visibility = (check &amp;&amp; g[Object.keys(g)[0]]) ? 'block' : 'none'; return &lt;div style={{display: visibility}}&gt;{Object.keys(g)[0]} {g[Object.keys(g)[0]]}&lt;/div&gt; } )}&lt;br/&gt;&lt;br/&gt;
  
  Show list Sports: {result.map(result_new =&gt; result_new.length &amp;&amp; result_new.Sports_games.map(g =&gt; { var visibility = (check &amp;&amp; g[Object.keys(g)]) ? 'block' : 'none'; console.log(visibility);return &lt;div style={{display: visibility}}&gt;{Object.keys(g)} {g[Object.keys(g)]}&lt;/div&gt; } ))}&lt;br/&gt;&lt;br/&gt;
  </code></pre>