Menu
I have a object like this
export const otherInformation = [
{
"FAQ": ['Getting started guide', 'Selling policy'],
"Help & Support": ['Help guide', 'Selling policy'],
"Legal": ['Terms of Use', 'Privacy Policy']
}]
My code
class Information extends Component {
render() {
const otherInformationLoop = otherInformation.map((value, key) => {
return (
<div>
<div className="col-md-4" key={key}>
<div className="dashboard-info">
{Object.keys(value).map((val, k) => {
return (<h4 k={k}>{val}</h4>)
})
}
</div>
</div>
</div>
)
})
return (
{ otherInformationLoop }
// <div></div>
);
}
}
Im having trouble looping through the object.
Error obtained is like this
Information.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object
How can I loop thorugh the object so that the obtained result is obtained
Thanks in advance. Any help is appreciated
414
We can't render an object, but we can render strings. What if we turn the object into a string and render it then? We can do that with JSON. stringify (docs).
React renders HTML to the web page by using a function called render(). The purpose of the function is to display the specified HTML code inside the specified HTML element. In the render() method, we can read props and state and return our JSX code to the root component of our app.
The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. In simple words, render props are simply props of a component where you can pass functions. These functions need to return elements, which will be used in rendering the components.
The Render Props is a technique in ReactJS for sharing code between React components using a prop whose value is a function. Child component takes render props as a function and calls it instead of implementing its own render logic.
You are rendering an array but you can only return a single block from your react component, wrap your map function within a div
class Information extends Component {
render() {
const otherInformationLoop = otherInformation.map((value, key) => {
return (
<div>
<div className="col-md-4" key={key}>
<div className="dashboard-info">
{Object.keys(value).map((val, k) => {
return (<h4 k={k}>{val}</h4>)
})
}
</div>
</div>
</div>
)
})
return (
<div>{ otherInformationLoop }</div>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
