React JS Adding Data to an Array through Functions-CodePudding

I'm creating an app that has user inputs. Using these inputs, the user will put in a selection. For this example, it's using the MuI component for autocomplete and has 4 options available.

When this selection is made, I would like to append this selection to the 'style' key in the dict. On submit I would like to handle this function async and console.log it right now just to ensure all the data is collected. I will late post this with an API. I have most things created but I think there's an issue with how my data is setup. I'm sure someone smarter then me will be aware of where i'm going wrong!

Have removed quite a bit of content but here is the barebones:

export default function JobParams() {

  const [page, setPage] = useState(0);
  const [dataTransfer, setdataTransfer] = useState({
    style: {},
    location: {},
    salary: {},
  });
  //trial
  const [activeStep, setActiveStep] = React.useState(0);
  const [skipped, setSkipped] = React.useState(new Set());
  const steps = ['Style ', 'Location ', 'Salary '];
  const [isSubmitting, setSubmitting] = useState(false)
  const [completed, setCompleted] = useState(false);

  function goNextPage () {
    if (page === 4) return;
    setPage(page => page 1)
  }
  
  function goBackPage () {
    setPage(page=> page-1)
    setCompleted(false)
  }

  function updateData(type, newData) {
    setdataTransfer(dataTransfer => {
      return {...dataTransfer, [type]: newData}
    })
  }
  
  async function submit() {
    //insert post method here or just hold the state 
      setSubmitting(true)
      await sleep(2000);
      // console.log(dataTransfer)
      setSubmitting(false)
      setCompleted(true)
    
  }



    return (

                    {/* Content goes here */}
                    {page === 0 && <ParamSelection data={dataTransfer.style} update={updateData}/>}
                    {page === 1 && <LocationSelection data={dataTransfer.location} update={updateData}/>}
                    {page === 2 && <SalarySelection data={dataTransfer.salary} update={updateData}/>}


                  {page === 0 && <ButtonSelectionEnd>
                    {page !== 0 &&<Button onClick={goBackPage}>Back</Button>}
                    {page !== 2 && <Button onClick={goNextPage}>Next</Button>}
                    {page === 2 && <Button type="submit" startIcon={isSubmitting ? <CircularProgress size="1rem"/> : null} onClick={submit} disabled={isSubmitting} onSubmit={async (values) => 
                      { await sleep(3000); 
                        console.log(values)
                        setCompleted(true)
                      }}
                      >
                        Submit
                      </Button>}
                  </ButtonSelectionEnd>}
                  
                  {page !== 0 && <ButtonSelection>
                    {page !== 0 &&<Button onClick={goBackPage}>Back</Button>}
                    {page !== 2 && <Button onClick={goNextPage}>Next</Button>}
                    {page === 2 && <Button type="submit" startIcon={isSubmitting ? <CircularProgress size="1rem"/> : null} onClick={submit} disabled={isSubmitting} onSubmit={async (values) => 
                      { await sleep(3000); 
                        console.log(values)
                        setCompleted(true)
                      }}
                      >
                        Submit
                      </Button>}
                  </ButtonSelection>}


    );
  }


function ParamSelection({data, update}){
  const newData={};

  return (
    <SelectionContainer>
      <StyleSelect onClick={()=> update('style', newData)}/>
    </SelectionContainer>
  )
}

function LocationSelection({data, update}){
  const newData={};

  return (
    <SelectionContainer>
      <LocationSelect/>
    </SelectionContainer>
  )
}

function SalarySelection({data, update}){
  return (
    <SelectionContainer>
      Show me the money!
    </SelectionContainer>
  )
}

The functions at the bottom are separate components, each which are the input fields.

As stated. I would like each one to log to an array, perhaps through:

  const [dataTransfer, setdataTransfer] = useState({
    style: {},
    location: {},
    salary: {},
  });

If you console log this currently you get an empty array.

What's wrong with my function?

 function updateData(type, newData) {
    setdataTransfer(dataTransfer => {
      return {...dataTransfer, [type]: newData}
    })
  }

Thanks!!

CodePudding user response：

Try

function updateData(type, newData) {
    setdataTransfer({...dataTransfer, [type]: newData})
    })
  }

CodePudding user response：

setdataTransfer(dataTransfer, dataTransfer[type] = newData)

setdataTransfer({...dataTransfer, [type]: newData})