If statement in react function

Question

I have 2 inputs with minimum and maximun number range, and I'm trying to use if statement so if user puts in the minimun input value that is higher from the maximun input, it will reset the input to be equal to the maximum. Why it's not working in the function minRangeInputChange?

class Generator extends React.Component {
  constructor (props) {
    super(props)
    this.state = { 
      onView: '0',
      minNum: 0 ,
      maxNum: 100
    } 
  }

  btnClick = () => {
    const { minNum, maxNum } = this.state;
    const min = Math.ceil(minNum);
    const max = Math.floor(maxNum);
    const x = Math.floor(Math.random() * (max - min + 1)) + min;
    return this.setState({ onView : x });
  }

  minRangeInputChange = (event) => {
    const { minNum, maxNum } = this.state;
    if (minNum > maxNum) {
      return this.setState({ minNum: maxNum });
    } else {
      return this.setState({ minNum: event.target.value });
      console.log(minNum);
    }
  }

  maxRangeInputChange = (event) => {
    const { maxNum } = this.state;
    this.setState({ maxNum: event.target.value });
  }

  render() {
    return (
      <div className="container">
        <Instructions />
        <Range 
          max={this.state.maxNum} 
          min={this.state.minNum} 
          minChange={this.minRangeInputChange}
          maxChange={this.maxRangeInputChange}
        />
        <Generate currentClick={this.btnClick} />
        <View show={this.state.onView} />
      </div>
    );
  }
}

export default Generator;

The Range Component:

class Range extends React.Component {
  constructor(props) {
     super(props)
  }

  render() {
    return (
      <div className="range">
        <h3>Minimum</h3>
        <input
          type="number" 
          value={this.props.minNum} 
          onChange={this.props.minChange} 
          required
        />
        <h3>Maximum</h3>
        <input
          type="number" 
          value={this.props.maxNum}
          onChange={this.props.maxChange}
          required
        />
      </div>
    );
  }
}

export default Range;

What specifically isn't working? Also, the console.log after the return is unreachable code. — Drew Reese
– Drew Reese, Commented Jan 29, 2020 at 9:20
One clear problem here is that you are doing things in the wrong order. You are comparing the numbers that are in the state before you update the state with the new value. Please rethink your approach because it is not logically sound. — JLRishe
– JLRishe, Commented Jan 29, 2020 at 9:23

TBouder · Accepted Answer · 2020-01-29 10:06:45Z

1

In your function minRangeInputChange, your are checking minNum vs maxNum, so if 0 > 100 then set minNum to 100. You want to compare the user value vs the max value, so if XX > max (let's say 50), then set minNum to max

You should try this value :

  minRangeInputChange = (event) => {
    const { minNum, maxNum } = this.state;
    if (event.target.value > maxNum) {
      return this.setState({ minNum: maxNum });
    } else {
      return this.setState({ minNum: event.target.value });
    }
  }

answered Jan 29, 2020 at 10:06

TBouder

2,7492 gold badges16 silver badges29 bronze badges

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

5 Comments

Alon Joshua Over a year ago

Thanks! I tried it and still my minimum input can assign higher values then the maximum input.

TBouder Over a year ago

In your Generator component, are the state correctly set (only the slider/range component display a wrong value) or are they wrong too ?

Alon Joshua Over a year ago

The state is correctly set. If I do console.log(maxNum); inside maxRangeInputChange function for example, It's will updated the state with the new input and print to the console the last state value (I didn't figure out this thing either).

TBouder Over a year ago

Try to change your props in Range : value={this.props.min} instead of value={this.props.minNum} : from Generator, you are sending min={this.state.minNum} and not minNum={this.state.minNum} - May not be the answer, but you need to change this !

Alon Joshua Over a year ago

Worked! thanks! now we just left the original problem unsolved :)

Collectives™ on Stack Overflow

If statement in react function

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related