Component props not updating on state change

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Ajit Kumar is looking for an . 寻找。

I'm having a component in React. It's prop group should update when the state cloneMode change. For this I'm using the following code:
Structure:

const DraggableElement = ({ list, setList, cloneMode }) => {
 return (
    <ReactSortable
      group={
        cloneMode
          ? { name: "tasks_group", pull: "clone" }
          : "tasks_group"
      }
      key={cloneMode}
      list={list}
      setList={setList}
      animation={200}
      delay={1}
      className="task-child_drag"
    >
      {list.map((e) => {
        return <TaskItem key={e._id} task={e} />;
      })}
    </ReactSortable>
  );
};

Parent:

const Tasks = () => {
  const [cloneMode, setCloneMode] = useState(false);

  return (
    <div className="tasks">
            <DraggableElement
              list={todo}
              setList={setTodo}
              cloneMode={cloneMode}
            />
            <DraggableElement
              list={inProgress}
              setList={setInProgress}
              cloneMode={cloneMode}
            />
            <DraggableElement
              list={done}
              setList={setDone}
              cloneMode={cloneMode}
            />
          </div>
  );
};

When I run setCloneMode(true) , it's not affecting the component. Any thoughts on how can I achieve it?

Answer 1

Without a codepen, any info about why you think the state isn't updating, or any more context it's difficult to answer your question but here is a list of things to try:

1. Open up React Developer Tools and confirm the state/prop is/isn't updating. Alternatively, you can check by having prop become the value of a data attribute so you can see it in the inspector data-test={cloneMode} .
2. Remove the key prop from your DraggableElement component. You don't need a key here. If you're going to use a key anywhere in React it should be unique. The way you have this setup now all the keys will be either true or false.
3. If all else fails I'd try manually passing in a true prop value for one of these to make 100% sure that the prop isn't working.

Answer 2

First thing is, You're not changing the state (or forgot to write it down). Without it we can't answer your question.

This is the default behavior of React. Component should rerender once the value of props or state is changed .

So, download React Dev Tools which is a browser extension for Chrome or Edge which helps to see/change the value of props and state from chrome developer window in real time. With this you'll get a better understanding of your Problem, and start to debug from there.