copy entire object and change one property-CodePudding

I am trying to to setData on input change. I want to copy entire object and change only one property, when I am doing name.first it is showing error ',' expected.

    <TextField
                  fullWidth={true}
                  variant="outlined"
                  className={classes.textField}
                  name="FirstName"
                  value={data ? data.name.first : ""}
                  onChange={(e) => {setData(Object.assign({}, data, {name.first : e.target.value}))}}
                />

CodePudding user response：

Try to add data like this {data} in Object.assign()

CodePudding user response：

You can try some shorthand

<TextField
  fullWidth={true}
  variant="outlined"
  className={classes.textField}
  name="FirstName"
  value={data ? data.name.first : ""}
  onChange={(e) =>
    setData({ ...data, name: { ...data.name, first: e.target.value } })
  }
/>

CodePudding user response：

You can use the spread operator

onChange={(e) => setData({ ...data, name: { ...data.name, first: e.target.value } })}

So it'll be

<TextField
    fullWidth
    variant="outlined"
    className={classes.textField}
    name="FirstName"
    value={data ? data.name.first : ""}
    onChange={(e) => setData({ ...data, name: { ...data.name, first: e.target.value } })}
/>