How to update only selected component with react hooks


I’m coding a to-do list using React hooks. Every added item has two dropdown list where the user can decide how urgent the task (urgency value) is and how long the thing to do will take (speed value). Updating either list will add their value into a ‘score’ property.

By clicking a “Sort” button I can sort the entries based on the score.

Right now the problem is that if I have more then one to-do item with different urgency and speed value, the score will always be the same for both components.

Can somebody help how to fix this? Thanks

function ToDo(){
  const [ input, setInput ] = React.useState('')
  const [ toDo, setToDo ] = React.useState([])
  const [ score, setScore ] = React.useState(0)
  const [ speed, setSpeed ] = React.useState(0)
  const [ urgency, setUrgency ] = React.useState(0)

      <h2>List of things to do</h2>
          value={ input }
          onChange={ (e) => setInput( ) }/>
        onClick={ () => {
          setToDo( toDo.concat(input))
        { task, idTask ) => {
          return (
              score={ speed + urgency }>
              <select onChange={(e) => { setSpeed(Number( }}>
                <option value={1}>slow</option>
                <option value={2}>medium</option>
                <option value={3}>fast</option>
              <select onChange={(e) => { setUrgency(Number( }}>
                <option value={1}>non-urgent</option>
                <option value={3}>urgent</option>
                  (index) => {
                    const newTodos = [...toDo]
                    newTodos.splice(index, 1);
                    setToDo( newTodos)
      <button onClick={ 
          () => { 
            const sortMe = [...toDo].sort((a, b) => b - a)
            setToDo( sortMe )

ReactDOM.render(<ToDo/>, document.getElementById('app'));

Probably split the components, have one for the to-dos list and one for the individual todos, what you have at the minute is super complicated. At the minute you have one state value for urgency/speed, those values are specific to individual to-dos. Pass the setToDo function down to the to-dos, then you can set the state in that component and then save it to the to-do list using that setToDo function.