V
V
Vlad2020-01-16 13:26:26
JavaScript
Vlad, 2020-01-16 13:26:26

Why does the component not see the props passed to it?

Hello. The situation is the following.
App is passing props list to Input.
When I enter a number, an error occurs on click and writes TypeError: list is undefined App.js:34.
Why is this happening and why is the passed value not visible? I can't understand how. help me please

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>
    );
  }
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question