Serialize form data to json react

Question

How I can serialize data in react ?

<form method="post" action="/insert" onSubmit={(e)=>this.addMysql(e)}>
    <label>Username</label>
    <input type="text" id="username" name="nameUser"/>
    <label>Password</label>
    <input type="text" id="password" name="passs"/>
    <button type="submit" type="submit">Dodaj</button>
</form>

This is my function

addMysql(event){
    console.log(event.targe) //this outputs an empty form
    event.preventDefault();
}

I dont want use State. Just onSubmit send all form data to AddMysql

https://medium.com/@snirlugassy/generic-input-handler-with-react-js-44a97e22cd0d

Thanks Sag1v

Do you know how i can make this `setStateVal(e){ this.setState({ e.target.name:e.target.value }) }` I dont want do function for each input to change state I want do it byt one function to each input — Paweł Baca, Dec 01 '17 at 11:48
something like [this](https://medium.com/@snirlugassy/generic-input-handler-with-react-js-44a97e22cd0d)? — Sagiv b.g, Dec 01 '17 at 11:50

score 1 · Answer 1 · answered Dec 01 '17 at 11:54

I suggest you use states because that is the Reacty way. if not, I may suggest a few things.

Normally I would have suggested to use FormData API, but it is not supported by IE and older browsers.

I think this answer should get you going, because its a plain JS version of serialize.

Finnally serialize if you're using jQuery, which I think you're not or you're not supposed to.

score -1 · Answer 2 · answered May 14 '21 at 15:53

//So, here's a simple trick i use to get this done:
//Using React Hook

    

const [data, setData] = useState({});
//the create an onInputChange function for the Inputs this way
const onInputChange = async e =>{
  const {name, value} = e.target;
  //check to validate if entry is not a number
  if(isNaN(name)){
    data[name] = value;
    
    //somehow update data
    setData({...data})
  }
}

Serialize form data to json react

2 Answers2