Using swal with react

[askeroff]

I have a list of components rendered. Each component has an edit button. When you edit and press ok, sweet alers pops up, and it should have the checkboxes in it, for the user to specify some options.

The Code

class TimeAddOptions extends React.Component {
  state = {
    moveTime: true,
    deleteTime: false,
  };

  changeMoveTime = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({
      moveTime: e.currentTarget.checked,
    });
    swal.setActionValue({
      confirm: { value: [e.currentTarget.checked, this.state.deleteTime] },
    });
  };

  changeDeleteTime = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({
      deleteTime: e.currentTarget.checked,
    });
    swal.setActionValue({
      confirm: { value: [this.state.moveTime, e.currentTarget.checked] },
    });
  };

  render(): JSX.Element {
    return (
      <div>
        <label>
          Add this task`s time to the new project
          <input
            type="checkbox"
            checked={this.state.moveTime}
            value={this.state.moveTime}
            onChange={this.changeMoveTime}
          />
        </label>
        <label>
          Subtract this task`s time from this project
          <input
            type="checkbox"
            checked={this.state.deleteTime}
            value={this.state.deleteTime}
            onChange={this.changeDeleteTime}
          />
        </label>
      </div>
    );
  }
}

const wrapper = document.createElement('div');
ReactDOM.render(<TimeAddOptions />, wrapper);

export default wrapper.firstChild;

swal({
        text: "You changing project's task. Read the options",
        content: TimeAddOptionsNode,
        buttons: {
          confirm: {
            value: { value: [true, false] },
          },
        },
      }).then(value => {
        this.props.handleRename({
          moveTime: value.value[0],
          deleteTime: value.value[1],
        });

      });

The Problem

First time around, I get the default values true false. But suppose this: User marks all checkboxes when swal pops up, presses enters, edits another thing. Pop up open withs all the checkboxes marked, but the actual data is the default one [true, false]. I understand why this happens, but I can't figure out how to fix it.

Can someone explain how you would do that in react? I woudl like this either to open up each time popup with default values or hold actual data based on the state of that component.

[askeroff]

Example of the problem (Click edit, mark all checkboxes, press ok, look at the console, then edit another item, don't touch checkboxes at all, press ok, look at the console, and you'll see the problem).

[askeroff]

Found the solution. Solution here