title: Render HTML from a json string in react
body: <p>I'm trying to render an HTML object from a JSON string that I'm receiving from an API. I'm able to get the string to render to HTML successfully but it shows the entire JSON string. I'm only looking to get specific values (Phone, Name, Id.) What would be the best way for me to extract specific values from my JSON array and format it in HTML? I'm referring to records by state but I'm unable to get any sub-value of record in the render process.  </p>
  
  <p><a href="https://i.stack.imgur.com/l74J9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/l74J9.png" alt="Here is the JSON result rendered to HTML I&#39;m getting when running the below code."></a></p>
  
  <pre><code>class menuScreen extends React.Component {
  
      constructor(props) {
          super(props)
  
          const data = store.getState();
  
          this.state = {
  
  
  
              username: '',
              messages: data.messages
          }
      }
  
      handleSearch(e) {
          this.setState({username: e.target.value})
      }
  
      handleChange(evt) {
          this.setState({
              username: evt.target.value.substr(0, 100)
          });
  
      }
  
      onLinkClicked() {
  
          var conn = new jsforce.Connection({serverUrl: 'https://cs63.salesforce.com', accessToken: sessionStorage.getItem('token')})
  
          var parent = this.state.username
          //console.log(this.state.username)
          conn.sobject("Contact").find({
              LastName: {
                  $like: parent
              }
          }, 'Id, Name, Phone'
  
          ).sort('-CreatedDate Name').
          limit(5).skip(10).execute(function(err, records) {
              if (err) {
                  return console.error(err);
              }
              for (var i = 0; i &lt; records.length; i++) {
                  var record = (records[i]);
                  console.log("Name: " + record.Name); //these are the records I'm trying to render
                 console.log("Phone: " + record.Phone);
  
  
              } this.setState({records : records})
  
  
          }.bind(this));
  
      }
  
      render() {
          return (
              &lt;div className='menubox' id='menubox'&gt;
                  &lt;div className='searchbar-container'&gt;
                      &lt;form onSubmit={e =&gt; e.preventDefault()}&gt;
                          &lt;input type='text' size='25' placeholder='Contact Last Name' onChange={this.handleChange.bind(this)} value={this.state.username}/&gt;
                          &lt;button type='submit' onClick={this.onLinkClicked.bind(this)}&gt;
                              Search
                          &lt;/button&gt;
                      &lt;/form&gt;
                     &lt;/div&gt;
                  &lt;div&gt;
              &lt;div dangerouslySetInnerHTML={ { __html: JSON.stringify(this.state.records) } }&gt;&lt;/div&gt; //how can I show specific values, isntead of the entire string?
          &lt;/div&gt;
      &lt;/div&gt;
          )
      }
  }
  export default menuScreen;
  </code></pre>