React forms and key/value pairs

0
votes

I have an object like this:

"data_source": {
    "name": "",
    "config": {
      "campaign_name": "campaign",

and 2 columns in a form on called CSV and the other Database. The dataBase will get the key "campaign_name" and the Csv will start off empty. A user must type in what they want and then the object should update. So if they want to name it "my cool campaign" the object should change to:

"data_source": {
        "name": "",
        "config": {
          "campaign_name": "my cool campaign",

I am using formik to create the form. This is my csv input:

       <TextField
          type="text"
          name="campaign_name"
          placeholder="Enter Text"
          onChange={(e) => customChange(e, setFieldValue)}
          className="text-field"
          variant="outlined"
        />

and then next to it will be the database input:

     <TextField
          type="text"
          name=""
          disabled
          placeholder="campaign_name"
          className="text-field"
          variant="outlined"
        />

How do I update the data object when the csv is being typed in?

reactjs