Одно государство рушится, а другое нет

Question

У меня {onView: '0'} в состоянии понижается как реквизиты для моего компонента View. Но состояние {min: 0, max: 100} не go до моего компонента Range. Где я go не так?

Приложение. js:

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

  render() {
    var btnClick = () => {
      var x = Math.ceil(Math.ceil(Math.random()) / Math.random());
      return this.setState({ onView : x });
    };
    return (
      <div className="container">
        <Instructions />
        <Range max={this.state.max} min={this.state.min} />
        <Generate currentClick={btnClick} />
        <View show={this.state.onView} />
      </div>
    );
  }
}

export default Generator;

Просмотр компонента:

 const View = ({ show }) => {
   return (
    <div className="view">
    <h1>{show}</h1>
    </div>
   );
 }

export default View;

Компонент диапазона:

class Range extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div className="rangeDiv">
        <input type="text" value={this.min}/>
        <input type="text" value={this.max}/>
      </div>
    );
  }
}

export default Range;

Буду признателен за любую помощь, спасибо!

Answer 1

попробуйте, пожалуйста! Я думаю, вы пропустили там реквизит

<input type="text" value={this.props.min}/>

Answer 2

Вы используете this.min вместо this.props.min и то же самое для max. Попробуйте это:

class Range extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { min, max } = this.props;
    return (
      <div className="rangeDiv">
        <input type="text" value={min} />
        <input type="text" value={max} />
      </div>
    );
  }
}

export default Range;