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)}>×</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.