score:0

Accepted answer
function FormContainer(data) {
  const [queue, setQueue] = useState(data);
  
  const cancel = (event) => {
    event.preventDefault();
    console.log("cancel");
  };

  const save = (event) => {
    event.preventDefault();
    // save the data in the state
  };

  const updateObject = (obj, keys, value) => {
    obj = JSON.parse(JSON.stringify(obj));
    let innerObj = obj;
    for (var i = 0; i < keys.length - 1; i++) {
      innerObj = innerObj[keys[i]];
    }
    innerObj[keys[i]] = value;
    return obj;
  }
  
  const handleUpdate = (event) => {
    const path = event.target.name;
    const keys = path.split(".");
    setQueue(updateObject(queue, keys, event.target.value));
  };

  return (
    <form onSubmit={save}>
      <Grid container>
        <Grid item sm={1}></Grid>
        <Grid container item sm={11} spacing={3}>
          <FormRow data={queue} handleUpdate={handleUpdate} />
        </Grid>
        <Grid container direction="row" justify="flexend" alignItems="center">
          <Grid item sm={1}></Grid>
          <Grid item sm={11} spacing={3} justify="flexend" alignItems="center">
            <Button variant="outlined" onClick={cancel} color="secondary">
              {" "}
              Cancel
            </Button>
            <Button variant="outlined" color="primary">
              {" "}
              Save
            </Button>
          </Grid>
        </Grid>
      </Grid>
    </form>
  );
}

Related Query

More Query from same tag