react: uncaught TypeError: Cannot read property 'state' of undefined

Question

I am trying to get 'state' object in function Application which is out from General class and I am getting this error "Uncaught TypeError: Cannot read property 'state' of undefined". The code is

class General extends Comment {
  constructor() {
    super();
    this.state = { comments: first_comment};
  }
}

const Application = () => {
  return (
    <div> Hello world beginner: {this.state.comments}</div>
  );
};

render(<Application/>, document.getElementById('container'));

No state in pure functional components. It doesn't even make sense on the face of it; in your `Application` component there's no other reference to state. Did you mean to pass it to `Application` somewhere? — Dave Newton, Mar 30 '17 at 15:29
now I see. I already get the answer but thanks for replaying. — Armen Sanoyan, Mar 30 '17 at 15:38

score 0 · Accepted Answer · answered Mar 30 '17 at 15:29

Application is stateless component. Not to say that arrow functions have lexical scoping of context.

Use props for stateless components.

const Application = (props) => {
  return (
    <div> Hello world beginner: {props.comments}</div>
  );
};

Or extend React.Component

class Application extends React.Component {
  constructor() {
     // init state
  }

  render() {
    return <div> Hello world beginner: {this.state.comments}</div>
  }
}

Mayank Shukla · Answer 2 · 2017-03-30T15:39:51.087

Few Things:

*Stateless Functional Components don't have state, lifecycle methods, and this keyword.

*You need to connect General and Application component so that Application component can you the state value of General component.

*Make Application component as child of General component and pass the comments value in props, and in Application access the value by props.comments.

Write it like this:

class General extends Component {
  constructor() {
    super();
    this.state = { comments: first_comment};
  }
  render(){
     return (
        <div>
            <Application comments={this.state.comments}/>
        </div>
     )
  }
}

const Application = (props) => {
  return (
    <div> Hello world beginner: {props.comments}</div>
  );
};

render(<General/>, document.getElementById('container'));

Check the working example:

class General extends React.Component {
      constructor() {
        super();
        this.state = { comments: 'first_comment'};
      }
      render(){
         return (
            <div>
                <Application comments={this.state.comments}/>
            </div>
         )
      }
    }
    
    const Application = (props) => {
      return (
        <div> Hello world beginner: {props.comments}</div>
      );
    };
    
    ReactDOM.render(<General/>, document.getElementById('container'));

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

<div id='container'/>

I would love but the the first answer was right too. So if I know correct I should choose the first correct answer :( — Armen Sanoyan, Mar 30 '17 at 15:55

score 0 · Answer 3 · answered Dec 12 '18 at 03:34

In your class component you should be extending or subclassing React.Component and when you do, that means you are going to be overriding the constructor() functions of React.Component classes with the one from General class-component, but you don't want to do that, you still want to access React.Component constructor() so you need to pass in props to the constructor and to super().

Next, when passing state as props to a functional component, you need to pass in props as an argument to the functional component, otherwise when doing this for example:

import React from 'react';

const ImageList = () => {
  console.log(props.images);
  return <div>ImageList</div>;
};

export default ImageList;

you will get that same error you got. Imagine I am trying to access state from your General class-based component into this ImageList component above and I do have it imported to General, it will give me the same error, because I have not passed props as an argument to ImageList functional component.

react: uncaught TypeError: Cannot read property 'state' of undefined

3 Answers3

Linked