javascript - Renderizar propiedades de objeto en React

reactjs object

Question

Tengo un objeto como este

export const otherInformation = [
{
    "FAQ": [''Getting started guide'', ''Selling policy''],
    "Help & Support": [''Help guide'', ''Selling policy''],
    "Legal": [''Terms of Use'', ''Privacy Policy'']
}]

Mi código

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

Tengo problemas para recorrer el objeto.

El error obtenido es así

Information.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object

¿Cómo puedo recorrer todo el objeto para obtener el resultado obtenido?

Gracias por adelantado. Cualquier ayuda es apreciada

Answer 1

Está renderizando una matriz pero solo puede devolver un solo bloque desde su componente de reacción, envolver su función de mapa dentro de un 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>
        );
    }
}