Failed to instantiate child component in React.js [closed]

Question

Failed to instantiate child component in React.js [closed]

Navigation

#1 by (2 votes)

-2

I always did HTML and CSS. I am starting to study React and I honestly do not understand the reason for the error. It is very basic and I wanted to know if someone can explain it to me. Thank you very much !!

import React from 'react';
    import ReactDOM from 'react-dom';

    class ItemLista extends React.Component {
        render () {
            return (
                <li>
                    <span>Nombre: {this.props.name}</span>
                    <span>Mail: {this.props.mail}</span>
                </li>
            );
        }
    }

    class CuerpoLista extends React.Component {
        render () {
            return (
                <ul>
                    {this.props.users.map(u => {
                        return (
                            <ItemLista 
                                key={u.id}
                                name={u.name}
                                mail={u.mail}
                            />
                        );
                    })}
                </ul>
            )
        }
    }

    class App extends React.Component {
        constructor() {
            super();
            this.state = {
                users: [
                    {id: 1, name: "Sebastián", mail: "[email protected]"},
                    {id: 2, name: "Noelia", mail: "[email protected]"}
                ]
            };
        }

        render () {
            return (
                <CuerpoLista users="this.state.users" />
            );
        }
    }

    ReactDOM.render(
        <App />,
        document.getElementById('root')
    )

javascript react

asked by Sebastian Molinari 06.12.2017 в 21:52

source

1 answer

User control in java [closed] Search filter

score 2 · Accepted Answer

In your class App you render the following line:

<CuerpoLista users="this.state.users" />

when you should lock the property between braces:

<CuerpoLista users={this.state.users} />

Then, in the CuerpoLista component I do not know if it works like this, but with the structure of => you do not need to specify the return , I would simply leave it like this:

render () {
    return (
        <ul>
            {this.props.users.map(u => <ItemLista 
                                          key={u.id}
                                          name={u.name}
                                          mail={u.mail} />)}
        </ul>
    )
}