CODEWITHSUNDEEP
javascriptreactjsreact-reduxreact-hooks
daniel ragimov
daniel ragimov

Reputation: 235

How to use useState to update Data?

I am building a multistep Form and I am trying to update my Data with the useState-Hook.

Unfortunatly I do no how to pass the components of the hook as a prop, to update them, after performing an onClick Event

Thats the important part of my code

multisteform.js

const defualtData = {
    Grundstück:'',
    Haus:"Haus",
    Wohnung:"Wohnung",
    Gewerbe:"Gewerbe",


}

const steps = [
    {id: 'Häuser'},
    {id: 'Fläche'},
    {id: 'Grundstückerschlosse'},
    {id: 'Bebauungsmöglichkeiten'}
]





export const  MultiStepFrom = () => {

const [formData, setForm] = useState(defualtData)
    const {step, navigation} = useStep({
        steps, 
        initialStep: 0,
    })
    
    const props = {formData, setForm, navigation}

    switch(step.id) {
    case 'Häuser':
        return <Häuser {...props} />
     
     case 'Fläche':
         return <Fläche {...props} />   
}



   
}

export default MultiStepFrom

Häuser.js

    function Häuser({ formData, setForm, navigation }) {


   const { Grundstück, Haus, Wohnung, Gewerbe } = formData;

    const changState = () => {
        navigation.next();

       // setForm([{ Grundstück: 'Grund', Haus:'Hauss' }]);
        //Here is my problem
       setForm(...formData, {
           Grundstück: "G",
       })

    }

<div
       className="container__containerimgage"
         name="Grundstück"
          value={Grundstück}
         onClick={changState}
                                    
 >

Thats the next page (but the data is not reaching that component, if I console .log (formData) I am just getting an emtpy array Also I can not target the data of the array

function Fläche({formData, setForm, navigation}) {

console.log(formData)

    console.log(Grundstück, Haus, Wohnung)

Upvotes: 0

Views: 303

Answers (1)

michael
michael

Reputation: 4173

Use setForm like below.

setForm({ ...formData, Grundstück: 'G' });

Upvotes: 1

Related Questions