# React array.map issue \[Solved\]

**URL:** <https://forum.freecodecamp.org/t/react-array-map-issue-solved/70072>\
**Category:** General\
**Created:** [December 28, 2016, 7:55pm UTC](https://forum.freecodecamp.org/t/react-array-map-issue-solved/70072 "2016-12-28T19:55:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Flopet17](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/flopet17/32/34902_2.png) [@Flopet17](https://forum.freecodecamp.org/u/Flopet17)\
**Post date:** [December 28, 2016, 7:55pm UTC](https://forum.freecodecamp.org/t/react-array-map-issue-solved/70072/1 "2016-12-28T19:55:24Z")

</div>

What is wrong with my code?

```auto
class Board extends React.Component{
    constructor(props) {
        super(props);
        
        this.state = {
            notes: ["note 1", "note 2", "note 3", "note 4", "note 5"]
        }
    }
    
    render() {
        let { notes } = this.state;
        
        let displayNotes = notes.map((note) => {
            return (
                <Note noteText={note} />
            );
        });
        
        return(
            <div className="board">
                {displayNotes}
            </div>
        );
    }
}

```

I have the Note component which displays a div with the corresponding text.  
When I remove the displayNotes from the Board component, it works.  
If I console.log displayNotes before the return, it also works well… 🤔

---

<div class="post-metadata">

**Author:** ![Flopet17](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/flopet17/32/34902_2.png) [@Flopet17](https://forum.freecodecamp.org/u/Flopet17)\
**Post date:** [December 28, 2016, 8:05pm UTC](https://forum.freecodecamp.org/t/react-array-map-issue-solved/70072/2 "2016-12-28T20:05:30Z")

</div>

It seems I need to have a `key` attribute for the items:

```auto
let displayNotes = notes.map((note, i) => {
    return (
        <Note key={i} noteText={note} />
    );
});

```

---

<div class="post-metadata">

**Author:** ![rickstewart](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rickstewart/32/66490_2.png) [@rickstewart](https://forum.freecodecamp.org/u/rickstewart)\
**Post date:** [December 28, 2016, 8:08pm UTC](https://forum.freecodecamp.org/t/react-array-map-issue-solved/70072/3 "2016-12-28T20:08:46Z")

</div>

> [@Flopet17](#):
>
> It seems I need to have a key attribute for the items:

React needs a way to uniquely identify each note within the virtual DOM.

---

<div class="post-metadata">

**Author:** ![Flopet17](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/flopet17/32/34902_2.png) [@Flopet17](https://forum.freecodecamp.org/u/Flopet17)\
**Post date:** [December 28, 2016, 8:17pm UTC](https://forum.freecodecamp.org/t/react-array-map-issue-solved/70072/4 "2016-12-28T20:17:56Z")

</div>

Didn’t knew it’s a MUST… 🙂  
In the tutorials they were only getting an error when they didn’t use a key attr.

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [January 16, 2021, 6:11am UTC](https://forum.freecodecamp.org/t/react-array-map-issue-solved/70072/5 "2021-01-16T06:11:18Z")

</div>