score:1

Accepted answer

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>
    );
}

score:1

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>
    )
}

score:3

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.
    )
  }
}

Related Query

More Query from same tag