0

Tenho os seguintes componentes:

Obj

import React from 'react';

export default class Obj extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
    }

    render() {
        let objs = Object.entries(this.props.data)
            .map((keyValue, index) => (
                <p key={index}><b>{keyValue[0]}</b> - {keyValue[1]}</p>
            ));

        console.log(objs);
        return <div>{objs}</div>
    }
}

e Modal:

import React from 'react';

export default class Modal extends React.Component {
    constructor(props) {
        super(props);
    }

    close(e) {
        e.preventDefault();
        e.stopPropagation();
        this.props.onCloseModal();
    }

    render() {
        if (!this.props.isModalOpen) {
            return <div></div>;
        }

        return (
            <div class="modal" style={{ display: "block" }}>
                <div class="modal-content">
                    <div class="modal-header">
                        <span class="close" onClick={e => this.close(e)}>&times;</span>
                        <h2>Details</h2>
                    </div>
                    <div class="modal-body">
                        {this.props.children}
                    </div>
                </div>
            </div>
        );
    }
}

No componente pai estão assim:

render() {
    return (
        <div>
            <Modal
                isModalOpen={this.state.isModalOpen}
                onCloseModal={this.onCloseModal.bind(this)}
            >
                <Obj data={this.state.data} />
            </Modal>
        </div>
    );
}

Quando e feita a chamada {this.props.children} o react reclama.

Objects are not valid as a React child (found: object with keys...

Alguem poderia explicar o que estou fazendo de errado?

Obrigado.

@edit Sub objetos não são entendidos pelo react eles precisam ser tratados para Nodes.

2 Respostas 2

3

O objeto children de props não é uma coleção de nodes de Virtual DOM, então ele não pode imprimi-los. O problema é que não entendi muito bem o que você estava querendo fazer...

3
  • Daniel estou tentando passar um objeto para o Component Obj que renderiza todas as keys e values do objeto passado, e estou tentando jogar isso dentro do modal. Commented 20/03/2017 às 14:21
  • Entao se eu passar para o obj um objeto {key:'value', key1:'value1'} ele abriria um modal com <div><p>key - value</p><p>key1 - value1</p></div> Commented 20/03/2017 às 14:26
  • 1
    Entendi Deniel, o objeto retornado tinha outros objetos dentro e o react nao entendia esses sub objetos Commented 20/03/2017 às 15:51
-4

Experimenta assim... não testei...

Coloca o loop map dentro da div no JSX

Obj

import React from 'react';

export default class Obj extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
    }

    render() {
        return (
            <div>
                { Object.entries(this.props.data).map((keyValue, index) => 
                  (<p key={index}><b>{keyValue[0]}</b> - {keyValue[1]}</p>)
                ) }
            </div>
       )
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .