CODEWITHSUNDEEP
javascriptreactjs
Ali Chbinou
Ali Chbinou

Reputation: 93

Storing each input's data in its respective state

I have three inputs, and I want each input's data to be stored in a state. For example, the name input should be stored in the name state, because I'll need it later to push the three states' values in a firebase database.

I used the onChange function to store the data, but I didn't know how to make each input's function relative to the state I want to put it in.

import React from "react";
import ReactDOM from "react-dom";

export default class Inputs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      email: "",
      age: ""
    };
  }

  handleChange = e => {
    this.setState({ name: e.target.value });
  };

  render() {
    return (
      <div>
        <form>
          <label>
            name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>

          <label>
            email:
            <input type="text" name="email" onChange={this.handleChange} />
          </label>
          <label>
            age:
            <input type="text" name="age" onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
        <textarea value={this.state.value} onChange={this.handleChange} />
        <button onClick={() => this.props.onClick(this.state.value)}>
          Add task
        </button>
      </div>
    );
  }
}

Upvotes: 1

Views: 49

Answers (2)

Arun Jose
Arun Jose

Reputation: 76

getChanges = (e) => {
    console.log(e);
    this.setState({[e.target.name]: e.target.value}, function () {
        console.log(this.state)
    })
};

call this function,

<Input onChange={(e) => this.getChanges(e)} name={'name'}
                                    value={this.state.name} placeholder={'Name'}/>

Upvotes: 2

Code Maniac
Code Maniac

Reputation: 37755

You can pass key and value

<input type="text" name="name" onChange={(event)=>this.handleChange(event,'name')} />

and in your function you can do something like this

handleChange = (e,key) => {
    this.setState({ [key] : e.target.value });
};

Upvotes: 2

Related Questions