Re Render Ui when State change inside Draggable of react-drag-reorder

Question

When we have any state update our JSX inside the Draggable does not re-render and remains the same. i am using react-drag-reorder to reoder my divs as per user requirement.

Answer 1

We can solve this problem by using a callback find this answer at GitHub Issue

const MyComponent = ()=>{
   const [val, setVal] = useState('');


const DraggableRender = useCallback(() => {

      return (
        <Draggable
        >
          <p>{val}</p>
        </Draggable>
      );
  }, [val]);

   return(

     <DraggableRender/>

    )
}