JIYIK CN >

The "Cannot read property 'props' of undefined" error occurs when a class method is called without binding the correct context to the this keyword. To resolve this error, define the class method as an arrow function or use the bind method in the class's constructor.

If you encounter an error in a functional component, scroll down to the next section.

The following is an example of how the error occurs.

import React, {Component} from 'react';

class App extends Component {
  logProps() {
    // ⛔️ Uncaught TypeError: Cannot read properties of undefined (reading 'props')
    console.log(this.props);
  }

  render() {
    return (
      <div>
        <button onClick={this.logProps}>Log props</button>
      </div>
    );
  }
}

export default App;

Notice that we defined logPropsthe method, but we did not have a context to bind the this keyword. Therefore, the value of this keyword in the logProps method is undefined.

To fix this error, you need to switch the logProps method to use an arrow function.

import React, {Component} from 'react';

class App extends Component {
  // 👇️ 现在使用 箭头 函数
  logProps = () => {
    console.log(this.props);
  };

  render() {
    return (
      <div>
        <button onClick={this.logProps}>Log props</button>
      </div>
    );
  }
}

export default App;

This works because arrow functions use the this keyword of the enclosing scope — in our case, the specific component instance.

If you receive a "Cannot read property 'props' of undefined" error in a functional component, make sure you are not accessing props with the this keyword, e.g. using props.myPropinstead of this.props.myProp.

function Button(props) {
  return (
    <button onClick={() => console.log('button clicked')}>
      {props.text}
    </button>
  );
}

function App() {
  return (
    <div>
      <Button text="Click" />
    </div>
  );
}

export default App;

Notice that the Button component uses props.text to access the text property passed to it.

Alternatively, we can destructure the prop to not have to access it on the props object.

function Button({text}) {
  return (
    <button onClick={() => console.log('button clicked')}>
      {text}
    </button>
  )
}

function App() {
  return (
    <div>
      <Button text="Click" />
    </div>
  );
}

export default App;

We deconstructed the text property from the props object, so the Button component can now access it directly.

We can do this for as many props as we want.

function Button({text, disabled}) {
  return (
    <button disabled={disabled} onClick={() => console.log('button clicked')}>
      {text}
    </button>
  );
}

function App() {
  return (
    <div>
      <Button text="Click" disabled={false} />
    </div>
  );
}

export default App;

The effect is as follows