Use the key prop when Rendering a List with React

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

JSX is merely JavaScript and to render a list you can use the array method .map to map an array to React elements. However, if you don't use the key prop correctly, it can lead to unexpected results, so we explore what can happen and how to use the key prop correctly.

RentPath User 5
RentPath User 5
~ 3 years ago

Hello,

I'm having problems with this example not recognizing the id portion of the item

{items: Array(6)} Inline Babel script:65 Uncaught TypeError: Cannot read property 'id' of undefined at <anonymous>:93:34 at Array.map (<anonymous>) at App.render (<anonymous>:90:23) at finishClassComponent (react-dom.development.js:11360) at updateClassComponent (react-dom.development.js:11337)

<strong>I cut and pasted the example to get going!</strong>

RentPath User 5
RentPath User 5
~ 3 years ago

and the code:

        render(){
            const {items}= this.state
            return(
                <div>
                    <button
                        onClick={this.addItem}
                        >
                        +
                    </button>
                    {items.map((i, index) => (
                        <div key={i.id}>
                            <button
                            onClick={() => this.removeItem(i)}
                            >
                            -
                            </button>
                            {i.value}:
                            <input />
                        </div>
                    ))}
                </div>
                  )
        }
    }
RentPath User 5
RentPath User 5
~ 3 years ago

and the code:

<quote> render(){ const {items}= this.state return( <div> <button onClick={this.addItem} > + </button> {items.map((i, index) => ( <div key={i.id}> <button onClick={() => this.removeItem(i)} > - </button> {i.value}: <input /> </div> ))} </div> ) } }</quote>
RentPath User 5
RentPath User 5
~ 3 years ago

Problem, resolved. I missed the arrow function in the setState function used to copy the arrays items.

Great example... Awesome, Fantastico... Thanks

Jose
Jose
~ 3 years ago

The input focus example is the best visual I've seen thus far in this course. Great way to drive home the importance of unique identifiers.

Jared Hensley
Jared Hensley
~ 3 years ago

Why use App and not the this keyword?

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

The properties you're talking about I'm assuming are the static properties. You cannot access static properties via this because they're not instance properties or even prototype properties. That's why I'm referencing App instead of this.

Rolando Barbella
Rolando Barbella
~ 3 years ago

Hi Kent, great course, thank you, so, you explained abit about using static, what is the advantage over state?

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

Hi Rolando, In retrospect I wish I hadn't don the static thing because there's been a lot of confusion about it and it really isn't doing much useful. The reason I did it was for the code to communicate that those properties are related in an important way to their "owner."

Rolando Barbella
Rolando Barbella
~ 3 years ago

No worries Kent, thanks for the answer and help :)

elad hirsch
elad hirsch
~ 3 years ago
Lokesh Sanapalli
Lokesh Sanapalli
~ 3 years ago

Hey Kent,

great course, one doubt about this video, why do we need ({ in setState. For example,

this.setState(({items}) => ({
                items: items.filter(i => i !== item),
            }))

Thanks, Lokesh.

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

Hi Lokesh, That's shorthand for this:

this.setState(previousState => {
  return { items: previousState.items.filter(i => i !== item) }
})

If you remove the ({ the syntax will be wrong for the shorthand and your JavaScript wont compile.