React array.map issue [Solved]

1

What is wrong with my code?

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… :thinking:

2

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

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

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

2 Likes
4

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