React Id function - reactjs

Question

I'm new to REACT.. I'm trying todo list websites based on the video for beginner react. But some function that has been use in REACT, which is id, I cannot understand
todo listList.length === 0 ? 1 : todoList[todoList.length -1].id + 1,
this function is assigned to add tasks in add list, but I don't know how it works using this code. If someone can kindly explain this to me, it will be a great of help. I keep on repeating on this part in the video, but still, it is hard to understand. Thank you.
This is the full code for app.js
import "./App.css";
import {useState} from "react";
import { Task } from "./Task"
function App() {
const [todoList, setTodoList] = useState([]);
const [newTask, setNewTask] = useState("");
const handleChange = (event) => {
setNewTask(event.target.value);
};
const addTask = () => {
const task = {
id: todoList.length === 0 ? 1 : todoList[todoList.length -1].id + 1,
taskName: newTask,
completed: false,
};
setTodoList([...todoList, task]);
};
const deleteTask = (id) => {
setTodoList(todoList.filter((task) => task.id !== id));
};
const completeTask = (id) => {
setTodoList(
todoList.map((task)=> {
if(task.id === id) {
return { ...task, completed: true };
} else {
return task;
}
})
);
};
return (
<div className="App">
<div className="addTask">
<input onChange={handleChange} />
<button onClick={addTask}> Add task</button>
</div>
<div cl assName="list">
{todoList.map((task) => {
return (
<Task
taskName={task.taskName}
id={task.id}
completed={task.completed}
deleteTask={deleteTask}
completeTask={completeTask}
/>
);
})}
</div>
</div>
);
}
export default App;
This is for task.js
export const Task = (props) => {
return (
<div
className="task"
style={{ backgroundColor: props.completed ? "pink" : "white"}}
>
<h1>{props.taskName}</h1>
<button Onclick={() => props.completeTask(props.id)}> Complete </button>
<button onClick={() => props.deleteTask(props.id)}> X </button>
</div>
);
}

Answer 1

Okay, it's really simple. You need to generate a special id for every task. one of the easiest ways you can do that is to generate an id from 1 to how many you want or need. here todoList.length === 0 ? 1 : todoList[todoList.length -1].id + 1 you first check if there is any task assigned or not. if not you generate the first id and it's 1. from here each task you add will get the last task id and add 1 number to it. so by this definition, the first task will have 1 as id and the second will have 2 as id.