Map函数在React组件中返回带有未定义元素的数组

Question

I currently has a component in which I have passed props into with the following render function:

 render(){ return ( <Card> <CardHeader>{this.props.title}</CardHeader> <CardBody> <CardSubtitle>Count: {Object.keys(this.props.machines).length}</CardSubtitle> { Object.keys(this.props.machines).length != 0 ? <ListGroup> { console.log('array result: ', Object.keys(this.props.machines).map((machine, key) => { console.log('machine name: ', machine); return <ListGroupItem key={key}> {machine} </ListGroupItem> }) ) } { Object.keys(this.props.machines).map((machine, key) => { console.log('machine name: ', machine); return <ListGroupItem key={key}> {machine} </ListGroupItem> }) } </ListGroup> : null } </CardBody> </Card> ); } 

The problem is that the array returned by the map function contains undefined elements as seen in the console.log('array result: '...) . However, the console.log('machine name: ', machine) does show individual string elements as shown in the screenshot below:

I have tried substituting <ListGroupItem> with other tags such as div but to no avail. Any help will be much appreciated.

Answer 1

The problem is that while returning from map, your JSX is in the next line to return so while compiling, automatic semicolon is inserted after return in which case it returns undefined, you must either have the JSX element in the same line or use ()

{
     console.log('array result: ',
     Object.keys(this.props.machines).map((machine, key) => {
           console.log('machine name: ', machine);
           return (    // parenthesis here
                <ListGroupItem key={key}>
                    {machine}
                </ListGroupItem>
            )
     })
}

or

{
     console.log('array result: ',
     Object.keys(this.props.machines).map((machine, key) => {
           console.log('machine name: ', machine);
           return <ListGroupItem key={key}>
                    {machine}
                </ListGroupItem>
     })
}