I am unable to render components dynamically in react.js,

Question

So, I started working in react and got stuck, when I was trying to render a component dynamically into the view, from a JSON file online. I am using axios.get to get information from JSON but is unable to render it properly.

any help is highly appreciated!!

Json : Json Link used in the project

import React, { Component } from "react";
import axios from "axios";


class Lessons extends Component {
  state = {
    Questions: []
  };

  async componentDidMount() {
    const { data: Questions } = await axios.get(
      "https://api.myjson.com/bins/1axyok"
    );
    this.setState({ Questions });
    console.log(Questions);
    console.log(this.state.Questions.QuestionID);
  }

  render() {
    return (
      <h4 style={{ padding: "20px" }}>{this.state.Questions.QuestionID}</h4>
    );
  }
}

The value for this.state.Questions.QuestionID (an example) is not getting rendered into the view

the part where it was supposed to render (below the question) QuestionID is blankcheck screenshot of the project here

So i tried to make two logs in the console (check code) and got the following output. The console.log for the object => console.log(Questions) gives result. another one, shows undefined check image of console.log here

setState is asynchronous, that's why your console.log yields undefined. Use a second argument to setState with a callback when you need to access the state. — digory doo
– digory doo, Commented Nov 5, 2018 at 14:39
Questions is an array. Therefore it doesn't have a property QuestionID. — trixn
– trixn, Commented Nov 5, 2018 at 14:41

Tholle · Accepted Answer · 2018-11-05 14:56:57Z

2

Questions is an array with one element in it, so you want to get element 0 of the array before trying to access QuestionId. The Questions is also a property of the response object, so you need to use that and not just the data.

Example

class Lessons extends Component {
  state = {
    Questions: []
  };

  async componentDidMount() {
    const { data } = await axios.get(
      "https://api.myjson.com/bins/1axyok"
    );
    this.setState({ Questions: data.Questions });
  }

  render() {
    return (
      <h4 style={{ padding: "20px" }}>
        {this.state.Questions[0] && this.state.Questions[0].QuestionID}
      </h4>
    );
  }
}

edited Nov 5, 2018 at 14:56

answered Nov 5, 2018 at 14:41

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

Comments

Adarsh · Accepted Answer · 2018-11-05 14:52:03Z

0

It's because axios's response.data contains the raw JSON data. Now with the JSON you posted the object contains an Array Question and each items in the Array contains the QuestionID. So modify the component code to this

class Lessons extends Component {
  state = {
    Questions: []
  };

  async componentDidMount() {
    const { data: Questions } = await axios.get(
      "https://api.myjson.com/bins/1axyok"
    );
    this.setState({ Questions: Questions.Questions }, () => {
      console.log(this.state.Questions);
    });
  }

  render() {
    return this.state.Questions.map((each) => (
      <h4 style={{ padding: "20px" }}>
        {each.QuestionID}
      </h4>
    );
  }
}

answered Nov 5, 2018 at 14:52

Adarsh

8279 silver badges23 bronze badges

1 Comment

Pranoy Mathew Over a year ago

Thank you, Aadi! but it shows an error that 'each' is not defined!

Collectives™ on Stack Overflow

I am unable to render components dynamically in react.js,

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related