React js State Object is not recognized within the render method

Question

I'm a beginner in React, in the componentDidMount, I'm retrieving a response object from Axios then I'm setting it to the state object, even though it is accessible from outside functions it wouldn't work inside the render method, I don't know how to bind the state to get access to render()

error that pops: Unhandled Rejection (TypeError): Cannot read property 'imageref' of undefined

export default class Product extends Component {
  constructor(props) {
    super(props);
    const id = this.state.comicId;
    console.log("This is printed from the constructor " + id);
  }

  state = {
    comicId: "",
    issueObjectState: "",
  };
render(){
<img
 src={this.state.issueObjectState.imageref}
 alt="Image Description"
 className="mx-auto img-fluid"/>
}
 
async componentDidMount() {
    let state = [];
    const id = this.props.location;
    let comicId = id.data;
    this.setState({ comicId: this.props.comicId });

    let issueData = await axios.get(`http://localhost:5000/comic/${comicId}`);
    let comicData = issueData.data;

    if (comicData) {
      this.setState({ issueObjectState: comicData });
      console.log(this.state.issueObjectState);
    }
  }
}

help is much appreciated

Would be useful to show the offending code. Btw, you are assigning this.props.comicData to the issueObjectState. Why is that? — codemax
– codemax, Commented Sep 7, 2020 at 12:08

Adel A · Accepted Answer · 2020-09-07 12:21:29Z

1

I see that you have many errors on your code, starting with declaring the state outside the constructor method, so you should do this first :

constructor(props) {
super(props);
this.state = {
comicId: "",
issueObjectState: "",
};
}

then lifecycle methodes can't be used with the async keyword before it, your async function must be inside the lifecycle method.

answered Sep 7, 2020 at 12:21

Adel A

462 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mehdi Rajani · Accepted Answer · 2020-09-07 12:26:27Z

1

What I believe here is you have to shift your this.state object to the constructor.

export default class Product extends Component {
 constructor(props) {
  super(props);
  state = {
    comicId: "",
    issueObjectState: "",
  };
  const id = this.state.comicId;
  console.log("This is printed from the constructor " + id);

 }
}

answered Sep 7, 2020 at 12:26

Mehdi Rajani

1616 bronze badges

Comments

Tobi · Accepted Answer · 2020-09-07 12:19:31Z

0

You are trying to access the object this.state.issueObjectState.imageref before you assign an object to issueObjectState. At the time of the error the issueObjectState is simply ""

render is called before componentDidMount. What you could use instead is componentWillMount to assign an object to issueObjectState. But it would be best practice to avoid componentWillMount alltogether and maybe in your case just assign it an object with a value of null

answered Sep 7, 2020 at 12:19

Tobi

3655 silver badges16 bronze badges

Comments

Priyanka Panjabi · Accepted Answer · 2020-09-07 12:23:58Z

0

Use it like :

   <img src={this.state.issueObjectState!==""?
    this.state.issueObjectState.imageref : this.state.issueObjectState }
    alt="Image Description" className="mx-auto img-fluid"/>

answered Sep 7, 2020 at 12:23

Priyanka Panjabi

4411 gold badge5 silver badges14 bronze badges

Comments

Mostafiz Rahman · Accepted Answer · 2020-09-07 12:28:22Z

0

Several flaws in your component.

You are accessing state inside the render method before the data is fetched and stored to the state. Axios fetch the data asynchronously and it won't be available inside the initial call of render method. Better add a check before accessing state data.
You are not returning any element or component from the render method which is incorrect.

Refactoring the render part as bellow should work:

render(){
 return (
 this.state.issueObjectState == '' ? null : 
 <img
  src={this.state.issueObjectState.imageref}
  alt="Image Description"
  className="mx-auto img-fluid"/>
 )
}

edited Sep 7, 2020 at 12:28

answered Sep 7, 2020 at 12:22

Mostafiz Rahman

8,6017 gold badges63 silver badges79 bronze badges

Comments

JB_DELR · Accepted Answer · 2020-09-07 12:44:02Z

async componentDidMount() {
    let state = [];
    const id = this.props.location;
    let comicId = id.data;
    this.setState({ comicId: this.props.comicId });

    let issueData = await axios.get(`http://localhost:5000/comic/${comicId}`);
    let comicData = issueData.data;

    if (comicData) {
      this.setState({ issueObjectState: comicData });
      console.log(this.state.issueObjectState);
    }
  }
}

should be:

componentDidMount() {
    const  {comicId} = this.state

    axios.get(`http://localhost:5000/comic/${comicId}`).then((issueData)=> {
      this.setState({ issueObjectState: issueData.data ? issueData.data : null });
      //console.log(this.state.issueObjectState); <-- does not work this.setState is like async
        }
});

      }
    }

and:

constructor(props) {
  super(props);
  this.state = {
   comicId: props.location.data,
   issueObjectState: "",
};
}

render:

render(){
 return (
  <div>
    {this.state.issueObjectState &&
    <img
      src={this.state.issueObjectState.imageref}
      alt="Image Description"
      className="mx-auto img-fluid"/>
    }
  </div>
 )
}

or:

render(){
 if (this.state.issueObjectState) 
 return (
    <img
      src={this.state.issueObjectState.imageref}
      alt="Image Description"
      className="mx-auto img-fluid"/>
 )
 return <Loading />  //<--- a compenent that show an animated loading image
}

Collectives™ on Stack Overflow

React js State Object is not recognized within the render method

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related