score:1
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.
)
}
}
Source: stackoverflow.com
Related Query
- Render HTML from a json string in react
- React js render html string returned from server
- React not turning HTML string from JSON into text
- How to render a react component from html string in ReactJS while setting in dangerouslysetinnerHtml?
- How to render html tag on React while fetching data from json
- How to render image from JSON string into my react application?
- React Render HTML object from JSON object
- Render HTML from a string that is stored in a React database
- How to render HTML Template as response from json in react js
- React render html from a string with a dynamic variable
- React - Render HTML from JSON
- Render HTML string as real HTML in a React component
- How can I render HTML from another file in a React component?
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- Render React Native Elements from JSON
- react use dangerouslySetInnerHTML to render json with html tags
- Get HTML in JSON to render as HTML in React Component
- Insert HTML into user string and render it in React (and avoid XSS threat)
- Render HTML string in isomorphic React app
- How to render a react component from a string name
- React How to render nested dropdown list in a form from a json data?
- React render string as HTML in ant design
- render React component from a string
- React render components from string
- React render pasted html as tags, not string
- How render a string as HTML in React
- Can I create a React Element from an HTML string or dom node/element
- How to render HTML Template and bind data from JSON response in ReactJS?
- How do I obtain a value from JSON object in a React render function?
- How to show only texts in react from json data with html tag?
More Query from same tag
- Auth0 Implementation is not populating
- How to dispatch an action with delay (debounce)
- Why is this reactjs useEffect function running endlessly?
- Generating inline font-size style using ReactJS
- How to add value to custom Input Field in React Table Library
- Generated snapshot with jest-styled-components out of order in different environments
- targeting clicked card index in map function
- I can't understand why components with 'connect()' are stateful in react
- Insert Icon on AntD Column Table based on Data Device
- How to avoid duplicate image urls on click in Redux
- React refs with components
- How to rotate the image captured using the getscreenshot method in react-webcam?
- Accessing Select Text Value from Formik Select
- Rerendering React props.children
- How do I fix "useEffect has a missing dependency" in custom hook
- Force React to reload an image file?
- Setting a state variable has no effect
- MUI (Material UI) Toggle Button Group useState Hook in React.js
- Jest: Cannot read property then of undefined
- Why is react 'stl-viewer' not loading my stl file served by my private custom python flask api
- Not able to access variables in jest.mock function
- can I unite states in React Redux?
- How to stop JavaScript events when React component unmounts?
- Why does useEffect React Hook not work properly with dependency?
- Reactjs not rendering until for loop ends
- Next.JS Cpanel Deployment Server.js not working properly
- useEffect gets stuck in an infinite loop
- SVG in React Component
- Authorization Components Setup for Redux/React
- Export beforeAll and afterAll in JEST