mercredi 29 janvier 2020

If statement in react function

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;

Aucun commentaire:

Enregistrer un commentaire