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!


//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...


//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!

Cya adventurers

Blog

Fast & easy... React states management in one function

Fabio Russo

Don't repeat the code...

Example...

To the code!

My idea is...

Join Our Newsletter. No Spam, Only the good stuff.

Related