reactjs - How to render a component which render return a component?

Question

for the following example I have a component GetCurrentVisitor which renders Visitors.

However it will only render the <h1> tag and the table is empty. I suspect I need to use ReactDOM to render Vistors component as well. But how to do it?

var VISITORS = [
        {
            first_name: 'Harry',
            last_name: 'Potter'
        },
        {
            first_name: 'Hermione',
            last_name: 'Granger'
        }
    ]

class GetCurrentVisitors extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visitors: VISITORS
        }
    }

    render () {
        return (
            <div>
                <h1>Current visitors</h1>
                <Visitors visitors={this.state.visitors} />
            </div>
        );
    }
}

class Visitors extends React.Component {
    constructor(props) {
        super(props);
    }
    render () {
        return (
            <table>
                {this.props.visitors.forEach(
                    function(visitor) {
                        <tr>
                            <td>
                            {console.log('from: ', visitor.first_name)}
                            {visitor.first_name}
                            </td>
                        </tr>
                    })}
            </table>
        );
    }
}

ReactDOM.render(
    <GetCurrentVisitors />, document.getElementById('getcurrentvisitors'))

Oleksandr T. · Accepted Answer · 2016-03-10 12:22:25Z

4

In this case you should use .map instead of .forEach

{this.props.visitors.map(function(visitor, index) {
  return <tr key={index}>
    <td>{ visitor.first_name } </td>
  </tr>
})}

Example

edited Mar 10, 2016 at 12:22

answered Mar 10, 2016 at 12:15

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

The Reason · Accepted Answer · 2016-03-10 12:23:29Z

1

You can also are able to use .forEach but in another way fiddle

render () {
  let itemList = [];
  this.props.visitors.forEach(function(visitor,index) {
    itemList.push(<tr key={index}><td>
        {visitor.first_name}
      </td></tr>
    )
  })
  return (
    <table>
      {itemList}
    </table>
    );
}

As for me Array.prototype.map more easy to use with React. It just another example.

Thanks

answered Mar 10, 2016 at 12:23

The Reason

8,0135 gold badges27 silver badges43 bronze badges

Collectives™ on Stack Overflow

reactjs - How to render a component which render return a component?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related