title: How to get value based on key from an array of objects in React
body: <p>I have a state</p>
  <pre><code>    const [analysisData, setAnalysisData] = useState(false);
  </code></pre>
  <p>I am setting the data of this state in a function and when I console <code>console.log(analysisData)</code> I am getting the output as</p>
  <pre><code> {ID:1, ANALYSIS_NAME : &quot;name1&quot;,
         custodians:&quot;[{\&quot;ID\&quot;: 1, \&quot;NAME\&quot;: \&quot;abc\&quot;}, 
                      {\&quot;ID\&quot;: 2, \&quot;NAME\&quot;: \&quot;xyz\&quot;}, 
                      {\&quot;ID\&quot;: 3, \&quot;NAME\&quot;: \&quot;pqr\&quot;}]&quot;
      
      };
  
  </code></pre>
  <p>When I try to display in HTML as below, I am getting error</p>
  <pre><code>    const AnalysisList = () =&gt; {
      return(&lt;div&gt;
      &lt;Panel&gt;
      {JSON.parse(analysisData.custodians).map((childData) =&gt; {
          return (
              &lt;div&gt;
                  {console.log(childData.NAME)}
              &lt;/div&gt;
          )}
      )}
      
  
      &lt;Panel&gt;
      &lt;/div&gt;)
      }
  
      export default AnalysisList
  </code></pre>
  <p>I am trying to display <code>&quot;Name&quot;</code> inside the div in the above code.</p>
  <p>How to display. Please help</p>