DRY react Code multiple similar functions

Question

I have the following code below, I know there is a way to make it more DRY. But I cannot seem to find out how? I can't make the State a variable. Thanks!

handleChangeN(event){
  let numb = event.target.value;
  this.setState({N: numb});
}
handleChangeI(event){
  let numb = event.target.value;
  this.setState({I: numb});
}
handleChangePV(event){
  let numb = event.target.value;
  this.setState({PV: numb});
}
handleChangePMT(event){
  let numb = event.target.value;
  this.setState({PMT: numb});
}
handleChangeFV(event){
  let numb = event.target.value;
  this.setState({FV: numb});
}
handleChangePY(event){
  let numb = event.target.value;
  this.setState({PY: numb});
}
handleChangeCY(event){
  let numb = event.target.value;
  this.setState({CY: numb});
}

Conan · Accepted Answer · 2017-03-20 20:19:47Z

1

handleChange(event, code){
    const numb = event.target.value;
    const toChange = {[code]: numb};
    this.setState(toChange);
}

answered Mar 20, 2017 at 20:19

Conan

6927 silver badges12 bronze badges

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

Comments

Anna Fohlmeister · Accepted Answer · 2017-03-20 20:22:20Z

1

Is it an absolute "must-have" that you have separate functions for each of these? Would it be possible to pass in the type (CY vs PY vs FV ...) when the function is called (possibly with a .bind() method?).

This seems a lot cleaner to me:

handleChange (type, event) {
    this.setState({[type]: event.target.value});
}


// Somewhere later on ....


something.onClick(handleChange.bind(this, "FV"));

Edit: Code Duplication

answered Mar 20, 2017 at 20:22

Anna Fohlmeister

4472 silver badges6 bronze badges

4 Comments

EEE Over a year ago

I ended up going with this solution because I used bind, just wondering. how would your component look like if your handle change was handleChange(event,type)

Anna Fohlmeister Over a year ago

That wouldn't be possible. By forcing the type parameter in with bind, it will always be the first argument. EDIT: Well, there is this monster .... something.onClick(function (event) { handleChange(event, "FV") });

EEE Over a year ago

ahh, thank you. Is it possible to bind multiple arguments in react? thanks a bunch!

Anna Fohlmeister Over a year ago

Sorry, my react skills are basically non-existent, this is just pure JS. You can pipe in as many arguments as you want after the this, just remember that they are the first arguments.

Vincent D'amour · Accepted Answer · 2017-03-20 20:35:50Z

1

Something like this might work:

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

You can then bind your function like this:

<Component onChange={event => this.handleChange(event, "N")} />

edited Mar 20, 2017 at 20:35

answered Mar 20, 2017 at 20:19

Vincent D'amour

3,9131 gold badge30 silver badges40 bronze badges

2 Comments

EEE Over a year ago

ah thank you this is what i ended up doing, Just wondering why does prop have to become the first argument? Lets say I kept it as (event,prop). How would the component look like? <Component onChange={event => this.handleChange("N", event)} />

Vincent D'amour Over a year ago

You don't need to keep prop as the first argument, you can have the order you prefer. the component will look like this <Component onChange={event => this.handleChange(event, "N")} />. Your function will then receive event first handleChange = (event, prop) => ... You can also rename prop for a better name if you want. I updated my example following your need.

Rafael Berro · Accepted Answer · 2017-03-20 21:07:07Z

1

This is also an alternative.

handleChanges(event) {
  const target = event.target;

  this.setState(
    {
      [target.name]: target.value
    }
  );
}

Then, you can register the handler like this.

return <input type='text' name='N' onChange={ this.handleChanges } />

Whenever you change the input value of the state N will be the same as the input.

edited Mar 20, 2017 at 21:07

answered Mar 20, 2017 at 20:24

Rafael Berro

2,6011 gold badge20 silver badges25 bronze badges

Collectives™ on Stack Overflow

DRY react Code multiple similar functions

4 Answers 4

Comments

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related