Single onChange function for multiple input fields is not working: ReactJS

Question

Code:

import React, { Component } from 'react';
import { Button, Input, Row, Col, Label } from 'reactstrap';

export default class  Settings extends Component {

    constructor(props) {
        super(props);
        this.state = { 
            tallyPort: '', companyYear: '', interval: '', timeRange: '', 
            databasePort: '', databaseUserName: '', databasePassword: '' 
        };  
    }

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

    handleSave = () => {
        console.log(this.state)
    }

    render() {
        return(
            <div className="dashboard" >
                <Input name="tallyPort" onChange={this.handleChange.bind(this, 'tallyPort')}  />
                <Input name="companyYear" onChange={this.handleChange.bind(this, 'companyYear')} />
                <Input name="interval" onChange={this.handleChange.bind(this, 'companyYear')} />
                <Input name="timeRange" onChange={this.handleChange.bind(this, 'companyYear')} />
                <Input name="databasePort" onChange={this.handleChange.bind(this, 'companyYear')} />
                <Input name="databaseUserName" onChange={this.handleChange.bind(this, 'companyYear')} />
                <Input name="databasePassword" onChange={this.handleChange.bind(this, 'companyYear')} />

                <Button style={{ width: '200px', marginLeft: '720px'}} onClick={this.handleSave.bind(this)} color="primary">Save</Button>
            </div>
        );
    }
}

Main problem with this.setState function, I'm not understand why it is not working. I'm trying to set each state value on "onChange" of input field, "setState" is not working properly, when i'm console all states after given values, it returns blank values, any one help me?

Mayank Shukla · Accepted Answer · 2018-02-02 06:58:37Z

6

Basic Idea:

You need to use Computed property name concept, to use the expressions for object property names. For that you have to put the expression inside [].

Solution:

You are passing the state variable name in onChange function, so you need to use [] because it will be a variable that will hold some state variable name, then only it will update that state variable.

If you don't use [] then, stateName will be treated as a key (string), it will create a new state variable with name stateName and put the value in that.

Write it like this:

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

Check this:

let obj = {b: 5};

let a = 'b';

obj = {...obj, a: 20}; //similar to setState

obj = {...obj, [a]: 1};

console.log(obj);

edited Feb 2, 2018 at 6:58

answered Jun 16, 2017 at 8:39

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Srikanth V · Accepted Answer · 2019-01-07 17:12:01Z

As mentioned above the Computed property name is the key to this solution. This solution worked well for me.

constructor() {
  super(props);
  this.state = {tallyPort: '', companyYear: '', interval: '', timeRange: '', 
            databasePort: '', databaseUserName: '', databasePassword: ''};
  this.handleChange = this.handleChange.bind(this);
}

// assigning the name and value is the main objective of this solution.
handleChange = (e) => {
  this.setState({
     [e.target.name]: e.target.value
  })
}

render() {
    return(
        <div className="dashboard" >
            <Input name="tallyPort" onChange={this.handleChange}  />
            <Input name="companyYear" onChange={this.handleChange} />
            <Input name="interval" onChange={this.handleChange} />
            <Input name="timeRange" onChange={this.handleChange} />
            <Input name="databasePort" onChange={this.handleChange} />
            <Input name="databaseUserName" onChange={this.handleChange} />
            <Input name="databasePassword" onChange={this.handleChange} />

            <Button style={{ width: '200px', marginLeft: '720px'}} onClick={this.handleSave.bind(this)} color="primary">Save</Button>
        </div>
    );
}

I hope this solution helps. Thanks.

Collectives™ on Stack Overflow

Single onChange function for multiple input fields is not working: ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related