title: Nested JSON parsing in react
body: <p>I have following response that I get in <code>fetch()</code></p>
  
  <pre><code>{
    "errorCode": "00",
    "errorMsg": "success",
    "roleList": [
      {
        "role_id": 900,
        "roleDescription": "Role_I"
      },
      {
        "role_id": 901,
        "roleDescription": "Role_II"
      }
    ]
  }
  </code></pre>
  
  <p>Now i need to get <strong>roleDescription</strong> and render it in , So i tried traversing through the JSON and storing the roleDescription in an array in state.</p>
  
  <p>below is the method written for the same:</p>
  
  <pre><code>getroles(e) {
            fetch('http://xyz', {
              method: 'POST',
              body: JSON.stringify({
                "role_id": this.props.location.state.role_id
              })
            })
            .then((response) =&gt; response.json())
              .then((responseJson) =&gt; {
                console.log(`response of getroles: `, responseJson)
                if (responseJson.errorCode === '00') {
                  this.setState({roleList : JSON.stringify(responseJson.roleList)});
                  let temp = [];
                  for (var i=0; i &lt; JSON.stringify(responseJson.roleList).length; i++) {
                    temp.push(JSON.stringify(responseJson.roleList[i].roleDescription))
                }
                }
                else {
                 alert("Error Fetching roles" + responseJson.errorMsg);
                }
  
              })
              .catch((error) =&gt; {
               console.error(error);
              });
          }
  </code></pre>
  
  <p>but i am getting error</p>
  
  <blockquote>
    <p>Cannot read property 'roleDescription' of undefined </p>
  </blockquote>
  
  <p>on line <code>temp.push</code></p>
  
  <p>I am very new to react so I am not quite sure if I have the right approach. Please help.</p>