Map function returns array with undefined elements in React component

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.

@PatrickRoberts Wow! That is easy to overlook. Thank you for the heads up! Resolved the issue immediately — Syuqri
– Syuqri, Commented Mar 19, 2018 at 5:09

Shubham Khatri · Accepted Answer · 2018-03-19 05:41:24Z

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

answered Mar 19, 2018 at 5:41

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

Syuqri Over a year ago

Thanks for the answer :) Works now

Collectives™ on Stack Overflow

Map function returns array with undefined elements in React component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related