Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Render Object properties in React

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

like image 414
Coeus Avatar asked May 01 '17 14:05

Coeus


People also ask

Can React render objects?

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

What is render () React?

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.

What are render props in React?

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.

What does the render () This props do?

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.


1 Answers

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>
        );
    }
}
like image 58
Shubham Khatri Avatar answered Oct 10 '22 15:10

Shubham Khatri