Почему компонент не видит переданый ему props?

Question

[Влад]

Всем привет. Ситуация следующая.
Из App передается props list в Input.
Когда ввожу число, то по клику вылетает ошибка и пишет TypeError: list is undefined App.js:34.
Почему так происходит и почему не видно переданного значения? Ни как не могу понять. Помогите пожалуйста

class App extends Component {
  constructor() {
    super();
    this.state = {
      passivList: [
        {
          id: 1,
          text: 10
        },
        {
          id: 2,
          text: 20
        }
      ],
      activList: [
        {
          id: 1,
          text: 30
        },
        {
          id: 2,
          text: 40
        }
      ]
    };
    this.inputClickActiv = this.inputClickActiv.bind(this);
    this.inputClickPasiv = this.inputClickPasiv.bind(this);
  }

  inputClickActiv = ({ list, value }) => {
    this.setState(
      list.push({
        id: Date.now(),
        text: value
      })
    );
  };

  inputClickPasiv = ({ list, value }) => {
    this.setState(
      list.push({
        id: Date.now(),
        text: value
      })
    );
  };

  render() {
    const { activList } = this.state;
    const { passivList } = this.state;
    return (
      <div>
        <h1>Money</h1>
        <article>
          <Input list={activList} on={this.inputClickActiv} />
          <Input list={passivList} on={this.inputClickPasiv} />
        </article>
      </div>
    );
  }
}


class Input extends Component {
  constructor(props) {
    super(props);
    this.inputClick = this.inputClick.bind(this);
  }
  inputValue = createRef();

  async inputClick() {
    if (+this.inputValue.current.value) {
      // ошибка в этой строке
      await this.props.on(this.props.list, this.inputValue.current.value);
    } else console.error("только число!");
    await (this.inputValue.current.value = " ");
  }

  render() {
    const { list } = this.props;
    return (
      <section className="activ-column">
        <input ref={this.inputValue} type="text" value={this.value} />
        <button onClick={this.inputClick}>input</button>
        <ul>
          <List list={list} />
        </ul>
      </section>
    );
  }
}

Comments

[fallus]

А для чего тут фигурные скобки?
inputClickPasiv = ({ list, value }) => {

[Влад]

fallus, понял свою ошибку, спасибо большое
исправил на

nputClickPasiv = (list, value) => {
    this.setState(() =>
      list.push({
        id: Date.now(),
        text: value
      })
    );
  };

все работает