TypeError: Cannot read property 'state' of undefined. However state can be successfully console.logged (REACT)

Question

I have a component which I am trying to create a state to. This state can be successfully logged/alerted but when used within my return statement it does not work.

Here is the component. The state that does not work is the viewMoreToken. This is being used within the map function.

class DisplayWSAAnsweredQuestions extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      viewMoreToken: false
    };
  }
  render() {
    alert(this.state.viewMoreToken);
    return (
      <>
        {this.props.answeredQuestions &&
          this.props.answeredQuestions.map(function(question, index) {
            if (!this.state.viewMoreToken) {
              if (
                question.QuestionResponse === "Y" ||
                question.QuestionResponse === "N"
              ) {
                return (
                  <>
                    <div
                      style={{
                        backgroundColor: "#E6E6E6",
                        padding: "1px"
                      }}
                    >
                      <ul>
                        {" "}
                        <b> Q :</b>
                        <div style={{ float: "right" }}>✔️</div>
                        {question.QuestionWhenAnswered}
                      </ul>
                    </div>
                  </>
                );
              } else if (question.QuestionResponse === "P") {
                return (
                  <>
                    <div
                      style={{
                        backgroundColor: "#BDBDBD",
                        padding: "1px"
                      }}
                    >
                      <ul>
                        <b> Q :</b>
                        {question.QuestionWhenAnswered}{" "}
                        <div style={{ float: "right" }}>❌</div>
                        {/* <br />
                          <b> S :</b>
                          {question.SuggestedSoloution} */}
                      </ul>
                    </div>
                  </>
                );
              }
            } else {
              return <>Nice </>;
            }
          })}
      </>
    );
  }
}

Here is the error message.

TypeError: Cannot read property 'state' of undefined

How come when the alert is used it display that it is set as false fine but as soon as it is used within the if statement in the .map function it says that it is undefined.

Any suggestions greatly appreciated.

Answer 1

It's a good practice to use like this every time when your render() use some props or state.

    const { answeredQuestions, ... } = this.props;
    const { viewMoreToken, ... } = this.state;

To avoid this zone problem, sample as below:

  render() {
    const { answeredQuestions } = this.props;
    const { viewMoreToken } = this.state;
    alert(viewMoreToken);
    return (
      <>
        {answeredQuestions &&
          answeredQuestions.map(function(question, index) {
            if (!viewMoreToken) {
              if (

In this way, you can use both normal function and arrow function, and other scopes {} inside your render() with no consideration.

Answer 2

The problem is that your map function is not bound to the outer this scope.

Use arrow function

this.props.answeredQuestions.map( (question, index) => {
//rest of the code
});