Keys concept in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a unique key to each list item in React.

React

const items = ['apple', 'banana', 'cherry'];
const list = items.map((item, index) => <li key=[1]>{item}</li>);

Drag options to blanks, or click blank then click option'

Aindex

Bitem

CMath.random()

Ditems

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-unique value like the whole array as key

Using Math.random() which changes on every render

Using index as the key ensures each list item has a unique identifier in this simple example.

2fill in blank

medium

Complete the code to correctly assign keys when rendering a list of objects.

React

const users = [{id: 1, name: 'Anna'}, {id: 2, name: 'Ben'}];
const list = users.map(user => <div key=[1]>{user.name}</div>);

Drag options to blanks, or click blank then click option'

Auser.name

BMath.random()

Cuser

Duser.id

Attempts:

3 left

💡 Hint

Common Mistakes

Using user object directly as key

Using random values that change on every render

Using user.id as key is best because it is unique and stable.

3fill in blank

hard

Fix the error in the code by choosing the correct key value.

React

const tasks = ['clean', 'cook', 'shop'];
return tasks.map(task => <p key=[1]>{task}</p>);

Drag options to blanks, or click blank then click option'

Atasks

Btask

CMath.random()

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using the whole array as key

Using random values that change every render

Using task as key works here because task names are unique strings.

4fill in blank

hard

Fill both blanks to create a list with unique keys and display user names.

React

const users = [{id: 10, name: 'Lara'}, {id: 20, name: 'Mike'}];
const list = users.map(user => <li key=[1]>{user.[2]</li>);

Drag options to blanks, or click blank then click option'

Auser.id

Buser.name

Cname

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using name as key instead of id

Using incorrect property names

Use user.id for the key and user.name to display the name.

5fill in blank

hard

Fill all three blanks to create a React list with keys and display user emails.

React

const users = [{uid: 'a1', email: '[e-mail]'}, {uid: 'b2', email: '[e-mail]'}];
const list = users.map(user => <div key=[1]>{user.[2]</div>);

return <section>[3]</section>;

Drag options to blanks, or click blank then click option'

Auser.uid

Bemail

Clist

Duser.email

Attempts:

3 left

💡 Hint

Common Mistakes

Using email as key instead of uid

Not rendering the list inside the section

Use user.uid as key, access user.email to display emails, and render the list inside the section.