Implementing undo/redo function in react

Question

I am trying to implement simple undo/redo function in my react app. So I am trying to maintain an array with old state values. But when I check the values of the old states, its all updated with the new state.

state :

state = {
        schedule : [],
        loads:[],
        undo:[],
        redo:[]
    };

const redoUndoObj ={
        oldStateSchedule : [...this.state.schedule],
        oldStateLoads : [...this.state.loads]
  }
       
  this.setState({ undo : [ ...this.state.undo , redoUndoObj]});

I'd love to see more code before I can give any good advice. — Tomas
– Tomas, Commented Nov 23, 2020 at 7:17
My idea is to get the last state from undo array and update the state with it, unfortunately I stuck here — Brutus
– Brutus, Commented Nov 23, 2020 at 7:23
Hope my answer below gives you ideas on how to solve this problem. — Tomas
– Tomas, Commented Nov 23, 2020 at 7:55

Tomas · Accepted Answer · 2020-11-23 07:37:47Z

I hope this give you an idea on how to solve the problem. I made code only for undo now to point you in the right direction. This example I made via React functional component using useState instead of Component class.

    const [schedule, setSchedule] = useState([]);
    const [loads, setLoads] = useState([]);
    const [undo, setUndo] = useState([]);
    const [redo, setRedo] = useState([]);

    const updateData = (newSchedule, newLoads) => {
    setSchedule([...newSchedule]);
    setLoads([...newLoads]);

    const newUndo = {
      schedule: [...newSchedule],
      loads: [...newLoads],
    };

    setUndo([...undo, ...newUndo]);
  }

  const undoChanges = () => {
    const lastElement = undo[undo.length - 1];
    const copyOfUndo = [...undo];
    
    // Update redo to be able to rollback
    setRedo([...undo]);

    // Set the previous values to Schedule and Loads
    schedule([...lastElement.schedule]);
    loads([...lastElement.loads]);

    // Remove the last element from undo
    lastElement.pop();
    undo([...lastElement]);
  }

Collectives™ on Stack Overflow

Implementing undo/redo function in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related