Iterating objects inside an array

Question

How do I get "name" from objects instead of {item}?

class Abc extends Component {
    state = {
        tags: [
            {
                "id": 1
                "name": "goal"
            },
            {
                "id": 2
                "name": "kick"
            }
        ]
    }

    render() {
        return (
            .................................
            <div>
                {this.state.tags.map((item, index) => (
                    <span key={index}>{item}</span>
                ))}
            </div>
            ...................................
        );
    }
}

wizebin · Accepted Answer · 2018-06-19 23:36:42Z

1

Just access it directly.

class Abc extends Component {
    state = {
        tags: [
            {
                "id": 1
                "name": "goal"
            },
            {
                "id": 2
                "name": "kick"
            }
        ]
    }

    render() {
        return (
            .................................
            <div>
                {this.state.tags.map((item, index) => (
                    <span key={item.id}>{item.name}</span>
                ))}
            </div>
            ...................................
        );
    }
}

edited Jun 19, 2018 at 23:36

answered Jun 19, 2018 at 23:33

wizebin

7307 silver badges15 bronze badges

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

2 Comments

Jayce444 Over a year ago

You should also use the object's id property as the key, rather than the index (assuming the id property is unique)

wizebin Over a year ago

Edited to implement suggestion from @Jayce444

Collectives™ on Stack Overflow

Iterating objects inside an array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related