Update data without rendering all components when data is updated Reactjs

Question

I'm trying to update a unique component once I make the request but all components in the map function are getting updated.

I have a parent component that's sending the data:

<WeekBuilder taskDetails={taskDetailsList} />

And I have this in the child component:

<ul className="ListContent">
  {
    props.taskDetails && props.taskDetails.map((task, i) => {
      return (
        <WeekItem
          key={i}
          removeTaskHandler={props.removeTaskHandler}
          taskDetails={task[props.userId]}
          actions={props.actions} />
     )
    })
  }
</ul>

Here the screenshot of how it looks and when I click on the day. For example, F updates both components but I only want to update the one I clicked on.

question from:https://stackoverflow.com/questions/66056195/update-data-without-rendering-all-components-when-data-is-updated-reactjs

Answer 1

Waitting for answers