Error: Cannot read property 'props' of undefined

Question

I am trying to send information from 'App.js' to 'Display.js' (which is a functional component) through props. But I am getting the error: "Uncaught TypeError: Cannot read property 'props' of undefined".

The same code works when changing the 'Display.js' from a functional component to a class component.

App.js

<div className="component-app">
  <Display value={this.state.next || this.state.total || "0"}></Display>
</div>

Display.js (functional component)

cconst display = (props)=>(
    <div>
        <div>{this.props.value}</div>
    </div>
);

Display.js (class component)

class Display extends React.Component {
    render() {
      return (
        <div >
          <div>{this.props.value}</div>
        </div>
      );
    }
}

The code for Display.js (class component) works, but why does functional component not work.

Dupocas Dupocas · Accepted Answer · 2019-09-02T19:37:47

this is for class based components only. Try like this

const display = (props)=>(
    <div>
        <div>{props.value}</div>
    </div>
);

Error: Cannot read property 'props' of undefined

1 Answers