Component props not updating on state change

Question

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?

`cloneMode` is a prop in `DraggableElement`, where are you using the `useState`? It's not clear to me. — Adam Jenkins, Oct 29 '21 at 11:10
@Adam Sorry for the confusion! I've updated the question to include the parent component — Ajit Kumar, Oct 29 '21 at 11:14
That I did for testing in the Parent component. I did a `setTimeout` and `setCloneMode(true)` — Ajit Kumar, Oct 30 '21 at 01:58
@AjitKumar Can you try adding `key={cloneMode}` to the `ReactSortable` component — fatihsolhan, Oct 31 '21 at 11:54
That should technically rerender when your state changes; You can verify that by adding a simple `console.log('rerendering')` within your `DraggableElement` — ale917k, Oct 31 '21 at 14:24
@fatihsolhan @ale917k Thank! I added the `key={cloneMode}` to the `ReactSortable` component That worked fine.. The component is now receiving the latest state and rerendering .. But, as in the question, the props are not updating, even when the state changes! I've updated the question — Ajit Kumar, Oct 31 '21 at 15:05
can you test that setting `"tasks_group"` and `{ name: "tasks_group", pull: "clone" }` is working fine without cloneMode ? can you test your `ReactSortable` that works properly with changing the group props manually? — nima, Oct 31 '21 at 16:25
and what is the `ReactSortable` ? tell me about the package name you usued — nima, Oct 31 '21 at 16:29
@nima I'm using react-sortablejs https://github.com/SortableJS/react-sortablejs — Ajit Kumar, Nov 01 '21 at 14:13
I mean it's working fine with `group={{ name: "tasks_group", pull: "clone" }}` and `group={"tasks_group"}` if you hard code them? — nima, Nov 01 '21 at 14:18
@AjitKumar Provide the part you change the state. (button or other element that deals with user interaction) — ABDULLOKH MUKHAMMADJONOV, Nov 01 '21 at 14:21
@ABDULLOKHMUKHAMMADJONOV That I did for testing in the Parent component. I did a `setTimeout` and `setCloneMode(true)` — Ajit Kumar, Nov 01 '21 at 14:46
@AjitKumar Let me know if you are doing `setTimeout` this way(with no arrow function): `setTimeout(function () { setCloneMode(true); })` — ABDULLOKH MUKHAMMADJONOV, Nov 01 '21 at 16:21
@ABDULLOKHMUKHAMMADJONOV No. I'm doing it like this: `setTimeout(() => { setCloneMode(true); }, 2000)` — Ajit Kumar, Nov 02 '21 at 03:09
@AjitKumar did you try adding keys to each draggable element as well? — MrCeRaYA, Nov 02 '21 at 13:49
@IgorOkorokov https://stackoverflow.com/questions/69767852/component-props-not-updating-on-state-change#comment123355632_69767852 — Ajit Kumar, Nov 03 '21 at 03:19
Can you create a codsandbox link, here given code snippet props are not changes as you mentioned setCloneMode are changing . But where it is called ? — Sooraj Jose, Nov 05 '21 at 06:27
install the React Dev Tools to debug your problem properly. you can confirm the state/prop is updating or not easily. — Ruhul Amin, Nov 07 '21 at 09:56

score 0 · Answer 1 · answered Nov 04 '21 at 05:32

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:

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}.
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.
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.

score 0 · Answer 2 · answered Nov 04 '21 at 05:46

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.

Component props not updating on state change

2 Answers2