React - Map through array of objects

Question

I'm able to map data when just using an object, but when using an array it doesn't some to work.

No errors in command line just nothing outputted.

Help appreciated.

Thanks

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

class JoeApp extends React.Component {
    render() {
        var data = [
            {
                name: "Joe",
                age: 27
            },
            {
                name: "John",
                age: 27
            },
            {
                name: "Bill",
                age: 25
            }
        ];

        return (
            <Data data={data} />
        );
    }
}

class Data extends React.Component {
    render() {
        return (
            <div>{this.props.data.name.map((info) => info.name})}</div>
        );
    }
}

ReactDOM.render(<JoeApp />, document.body);

hackerrdave · Accepted Answer · 2017-02-12 00:09:26Z

4

You need to use the .map() function on the array itself, which would be this.props.data:

<div>{this.props.data.map((elem) => elem.name})}</div>

This will convert the array of objects:

var data = [
        {
            name: "Joe",
            age: 27
        },
        {
            name: "John",
            age: 27
        },
        {
            name: "Bill",
            age: 25
        }
    ];

To an array of name strings:

var data = ["Joe", "John", "Bill"];

answered Feb 12, 2017 at 0:09

hackerrdave

6,7362 gold badges27 silver badges29 bronze badges

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

1 Comment

El. Over a year ago

there's an useless curly bracket in <div>{this.props.data.map((elem) => elem.name)}</div>

Collectives™ on Stack Overflow

React - Map through array of objects

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