Each child in a list should have a unique "key" prop. How is it resolve

August 22, 2024

I don’t understand what is problem in my todo list make.

import React, { useState } from 'react';
import Task from './component/Task'

function App() {

    const [task, setTask] = useState();
    const [taskList, setTaskList] = useState([]);

    function AddTask() {
        setTaskList([...taskList, { task: task }]);
        setTask('');
    }
    return (
        <div>

            <h1>List</h1>
            <input type='text' placeholder='fill your tast' onChange={(e) => { setTask(e.target.value) }} />
            <button onClick={AddTask}>Add</button>
            {
                taskList.map((task, i) => {
                    return (
                        <div>
                            <Task key={i} task={task.task} />
                        </div>
                    )
                })
            }
        </div>
    )

}

export default App;




another component

import React from 'react';

function Task(task) {
    return (
        <div>
            {task.item}
        </div>
    )
}

export default Task;

>Solution :

The key prop is required when you are mapping an array as JSX element.
Notice how i used key in div and not in Task, this means you’ll need to use key property in the higher level elemen.

const [task, setTask] = useState();
const [taskList, setTaskList] = useState([]);

function AddTask() {
    setTaskList([...taskList, { task: task }]);
    setTask('');
}
return (
    <div>

        <h1>List</h1>
        <input type='text' placeholder='fill your tast' onChange={(e) => { setTask(e.target.value) }} />
        <button onClick={AddTask}>Add</button>
        {
            taskList.map((task, i) => {
                return (
                    <div key={`${i}`}>
                        <Task task={task.task} />
                    </div>
                )
            })
        }
    </div>
)