TypeError: Cannot read property 'items' of null

Question

I am creating program and there I need to use smth from first component in second component. If you can help we to construct it.

My code

class Clock extends React.Component {
  state = { items: ["Hakob", "Arman"] };

  Add() {
    const newitems = this.state.items.concat([prompt("a")]);
    this.setState({ items: newitems });
  }

  render() {
    return (
      <div>
        <Clock2 Clock2={this.state.items} />
      </div>
    );
  }
}

class Clock2 extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.Add}>click</button>
        {this.state.items.map((e, i) => {
          return <div key={e + i}> {e} </div>;
        })}
      </div>
    );
  }
}

ReactDOM.render(<Clock />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

My error` TypeError: Cannot read property 'items' of null.

Help me please if you can...

Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — jonrsharpe, Nov 02 '20 at 11:15
The point of SO is to be a repository of general solutions, not to solve the same problem over and over again with different identifiers. If you have read through the information in the duplicate, fixed your code to bind `this` correctly and *still* have a problem, please [edit] to give a [mre] of that rather than just *"doesn't help"*. — jonrsharpe, Nov 02 '20 at 11:20
I would not expect that to work, no. It doesn't make sense - `Add` wasn't in `props` to begin with, and even if it was you'd be replacing it with a new no-op arrow function. — jonrsharpe, Nov 02 '20 at 11:21
More specific to your context: https://stackoverflow.com/q/33973648/3001761 — jonrsharpe, Nov 02 '20 at 11:23
I had done it, but id didn't work. I had wrote Add = () => { const newitems = this.state.items.concat([prompt('a')]) this.setState({items:newitems}) } but there it shows the same error — Hayko, Nov 02 '20 at 11:23
You still get the error because you have multiple other problems in your code. See this [demo](https://codesandbox.io/s/vigorous-currying-ipjfy?fontsize=14&hidenavigation=1&theme=dark) — Yousaf, Nov 02 '20 at 11:28

Reyno · Answer 1 · 2020-11-02T12:30:23.313

You need to pass the items and the Add function to Clock2 as props. Then inside Clock2 use the passed down props.

class Clock extends React.Component {
  state = { items: ["Hakob", "Arman"] };

  Add = () => {
    const newitems = this.state.items.concat([prompt("a")]);
    this.setState({ items: newitems });
  }

  render() {
    return (
      <div>
        <Clock2 items={this.state.items} Add={this.Add} />
      </div>
    );
  }
}

class Clock2 extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.Add}>click</button>
        {this.props.items.map((e, i) => {
          return <div key={e + i}> {e} </div>;
        })}
      </div>
    );
  }
}

ReactDOM.render(<Clock />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

TypeError: Cannot read property 'items' of null

1 Answers1