Does anyone know what this line of Javascript code is doing in React?

Does anyone what the code inside the onChange is doing?
I understand that …textData is the spread operator, but why is it spreaded inside of a { } and what is [e.target.name]: e.target.value doing, is this a new javascript syntax? Sorry for noob question!

setTextData({ ...textData, [e.target.name]: e.target.value })

The rest of the file looks like this, the logistic data is an Object with key value pairs.

Thank you!

  const { state } = useLocation();
  const logisticData = state;


  const [textData, setTextData] = useState({
    name: maybe(logisticData.logistic_name),
    location: maybe(logisticData.logistic_location),
    desc: maybe(logisticData.logistic_description),
    quantity: maybe(logisticData.logistic_quantity),
    borrowedBy: maybe(logisticData.logistic_borrowed_by),
    status: maybe(logisticData.logistic_status),
  });

  const { name, location, desc, quantity, borrowedBy, status } = textData;

  const onChange = (e) => {
    setTextData({ ...textData, [e.target.name]: e.target.value })
  }

>Solution :

Creates a new object with all of the properties from the textData object and a new property with the same value

const x = 'test'

const obj = { x: 'x', y: 'y' }

const newObj = { ...obj, [x]: x }

console.log(newObj)