How to render Children in React?

Asked

Viewed 292 times

0

I have the following components:

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

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

In the parent component they are like this:

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

When the call is made {this.props.children} the Act claims.

Objects are not Valid as a React Child (found: Object with Keys...

Could someone explain what I’m doing wrong?

Thank you.

@Edit Sub objects are not understood by React they need to be treated for Nodes.

javascript react

2 answers

3


The object Children de props is not a collection of nodes of Virtual DOM, then he can’t print them. The problem is I don’t quite understand what you were trying to do...

  • Daniel I’m trying to pass an object to the Obj Component that renders all the Keys and values of the past object, and I’m trying to throw that into the modal.

  • So if I pass an object {key:'value', key1:'value1'} to obj it would open a modal with <div><p>key - value</p><p>key1 - value1</p></div>

  • 1

    I understood Deniel, the returned object had other objects inside and the Act did not understand these sub objects

-3

Try it like this... I haven’t tried it...

Places the loop map inside the div in 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>
       )
    }
}

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.