Fast & easy... React states management in one function
Tags: javascript, react, function, web
Published: 2018-06-23 15:28:33

---
title: Fast & easy... React states management in one function
published: true
description: setState(all in one) 
tags: #javascript,#react, #function, #web
cover_image: "https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fnozbe.com%2Fimages%2Frepeat.png&f=1" 
---

#Don't repeat the code...

In React, like anywhere else in your code, you must **never** repeat yourself unless it is **strictly** necessary (almost never).

Probably what you're going to read, it's easy stuff, but reading some code online, I thought about dealing with the subject ... I "apologize" to the _experts_ for the banality.

##Example...

We have to manage a text input tag, and make sure to memorize the value entered by the user, and show It somewhere, till it's changed again!

**How do we do it in React?**

We insert an `onChange` that updates the `state` of the component to the last input value ... and then we pass the value of the `state` to the input tag, or to any other tag on the page, to show the last input value.


##To the code!

```js

//we've a class... with a state defined

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      myFirstState:"Labrador"
    }

//we're going to manage the changes, and setState() equal to the user input

   valueChange = (e) => {
      this.setState({myFirstState : e.target.value});
    }

//rendering time...we've an Input tag, with the state as value 
//and the function, calling to onChange

render() {
    return (
        <div className="just a class">
          <input placeholder="insertValue" value={this.state.myFirstState} 
                 onChange= {this.valueChange(e)}/>
        </div>
       )
   }
}

```

That's _basic_ stuff.
And It's just a way to go for It.

But what If we've more than one `<input>` ?
Not two... not three... we've more than ten `<input>` doing the **same** stuff?
(it is an exaggeration useful for the post)

As you can see our `handleChange` function, changes a specific state in It's `setState()` ... if we use the same function for other `<input>` we will change the value of `myFirstState` everytime.
(And trust me... I have seen people use numerous functions doing the same stuff, like these.)

##My idea is...

```js

//we've a class... with a more states defined

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      myFirstState:"Labrador",
      mySecondState:"Akita"
    }

//we're going to manage the changes, and setState() equal 
//to the user input... for all the possible "keys" in the state object

      valueChange = (key) => {
        return function (e) {
          var obj= {};
          state[key] : e.target.value;
          this.setState(obj);
        }.bind(this);
       }

//rendering time...we've more Input tags, with the states as values and one
//function, calling onChange... we're passing the "key" as argument.

render() {
    return (
        <div className="just a class">
          <input placeholder="insertValue" value={this.state.myFirstState} 
                 onChange= {this.valueChange("myFirstState")}/>
          <input placeholder="insertValue" value={this.state.mySecondState} 
                 onChange= {this.valueChange("mySecondState")}/>
        </div>
       )
   }
}

```

With that, we're calling the method `setState()` passing an object where the `key` is the state we want to change and the value is the user input!.
We're also binding `this` or we're going to receive an _error_.

(Keep in mind... `setState()` triggers the render)

**I hope I've been useful ... I'm looking for suggestions to manage this kind of case in more efficient ways!**

<center>![hug](https://media.giphy.com/media/QbqiJzOOpolWg/source.gif)</center> 

<center>Cya adventurers</center>