Render HTML from a json string in react

JSON.parse your string into a JavaScript object. You can then do whatever processing you want on that object, such as removing fields you don't want, and then you can JSON.stringify it back into a JSON string which you can render.

Something like:

class BlahBlah extends React.Component {  constructor() {    //...some code...    this.processJson = this.processJson.bind(this)  }  //...a lot of code...      processJson(json) {    var object = JSON.parse(json)    var output = {}    //for every property you want    output[property] = object[property]    return JSON.stringify(output)  }  //...a lot more code...  render() {    return(      //...even more code...      <div dangerouslySetInnerHTML={ { __html: this.processJson(this.state.records) } }></div>      //...and yet more code.    )  }}

You can run a map function and output the JSX for each item.

class menuScreen extends React.Component {    constructor(props) {        super(props)        const data = store.getState();        this.state = {            username: '',            messages: data.messages,            records: [],        };    }    render() {        return (            <div>                {this.state.records.map(record => (                    <div>{record.attributes.name} {record.attributes.phone} {record.whatever}</div>                )}            </div>        );    }}

Keep in mind, if you want a more complex HTML structure within map function, you'll have to wrap it in a single DOM node.

The full file would look like:

render() {    return (        <div className='menubox' id='menubox'>            <div className='searchbar-container'>                <form onSubmit={e => e.preventDefault()}>                    <input type='text' size='25' placeholder='Contact Last Name' onChange={this.handleChange.bind(this)} value={this.state.username}/>                    <button type='submit' onClick={this.onLinkClicked.bind(this)}>                        Search                    </button>                </form>            </div>            <div>                {this.state.records.map(record => (                    <div>{record.attributes.name} {record.attributes.phone}</div>                )}            </div>        </div>    );}

You could create a separate render method that will render your records like so:

renderRecords(records) {  return records.map(r => <div> r.Name, r.Phone</div>);}

And then call the method inside your render method, instead of using dangerouslySetInnerHTML, like so

render() {    return (        <div className='menubox' id='menubox'>            <div className='searchbar-container'>                <form onSubmit={e => e.preventDefault()}>                    <input type='text' size='25' placeholder='Contact Last Name' onChange={this.handleChange.bind(this)} value={this.state.username}/>                    <button type='submit' onClick={this.onLinkClicked.bind(this)}>                        Search                    </button>                </form>               </div>            <div>        <div>{ this.renderRecords() }</div>     </div></div>    )}