Passing multiple parameters to function in reactjs

Question

I have a json file in node server.js artist object as state

{
  id: 1,
  name: "name_test1",
  email: "test1@test1.pl",
  pass: "pass_test1",
},

I created form to add new artist to object :

<div className="form-group">
    <label for="exampleInputName2">Name</label>
    <input
        name="name" className="form-control" placeholder="name" value={this.state.name}
        onChange={this.onInputChange.bind(this, 'name')} />
  </div>
  <div className="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input
        type="email" className="form-control" placeholder="email" value2={this.state.email}
        onChange={this.onInputChange.bind(this, 'email')}  />

</div>
<div className="form-group">
  <label for="exampleInputEmail2">Password</label>
  <input
      type="password" className="form-control"  placeholder="password" value3={this.state.password}
      onChange={this.onInputChange.bind(this, 'password')}  />

<button type="submit" className="btn btn-default" onClick={this.onClick}>Add Artist</button><br/><br/>

I want to send the data from the inputs (name, email, password) to my onClick function which looks like :

   onInputChange: function(name, e) {
    var change = {};
    change[name] = e.target.value;
    this.setState(change)
  },



onClick: function() {
    if (this.state.name !== "" || this.state.email !== "" || this.state.password !=="") {
      Actions.postArtist(this.state.name);
    }
    this.setState({name: ""})
  },

But i have no idea how I can pass to onClick function more than one parameter (now i have name, but want also take from my inputs email and password.

When i submit the onClick button on my formulage my object looks like :

{id: 1486368952, name: "BLEH"}

and i want looks like this :

{id: 1486368952, name: "BLEH", email: "xxx", password: "xxx"}

My postArtist function look like this :

postArtist: function(name, email, password) {

if(!this.artists) {
  this.artists = [];
}
  var artist = {
    "id": Math.floor(Date.now() / 1000),
    "name": name,
    "email": email,
    "password": password,
    // "password_conf": password_conf
  };
  this.artists.push(artist);

You now that JSON file isn't valid json? http://stackoverflow.com/a/949469/3310334 — theonlygusti, Feb 06 '17 at 08:27
can you provide a jsfiddle? I think your onClick should be actually working. You're only missing `.bind(this)` there? — Lyubomir, Feb 06 '17 at 08:32

score 0 · Accepted Answer · answered Feb 06 '17 at 08:42

You can write it like this:

onClick: function() {
    if (this.state.name !== "" || this.state.email !== "" || this.state.password !=="") {
      let data = this.state;
      let obj = {name: data.name, email: data.email, password: data.password}
      Actions.postArtist(obj);
    }
    this.setState({name: ""})
  },

Or you can pass the complete state obj if it contains only these 3 fields, like this:

 onClick: function() {
      if (this.state.name !== "" || this.state.email !== "" || this.state.password !=="") {
          Actions.postArtist(this.state);
      }
      this.setState({name: ""})
  },

And in postArtist method recieve it as a object like this:

postArtist: function(data) {

  if(!this.artists) {
    this.artists = [];
  }
  var artist = {
    "id": Math.floor(Date.now() / 1000),
    "name": data.name,
    "email": data.email,
    "password": data.password,
    // "password_conf": password_conf
  };
  this.artists.push(artist);

passing data by obj (if more than 2 or 3 params are there) in function is scalable, now if you want to pass one more field `age` you dont have to create a new param in function postArtist. directly you can access it by data.age :) — Mayank Shukla, Feb 06 '17 at 09:00

Passing multiple parameters to function in reactjs

1 Answers1