Im using react to fetch data from starwars api(<https://swapi.co/>). It has a homeworld attribute which calls a futher api for fetching the details about homeworld. I've tried using axios.get() inside another axios.get() to fetch the details for **`"${results.homeworld}"`** (PFA code), but it doesnt return anything. Not sure why is this happening and even i cant update state even though i change the axios.get request. It's set to my first search i.e Luke skywalker. What should i do for changing state with every request and how to handle the homeworld API inside the inital JSON object.Also i get an error of **Unexpected token < in JSON at position 0** , did try online help for that but still the same problem.

```
import React from "react";
import axios from "axios";

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

    this.state = { data: {}, name: "", homeplanet: "", species: "" };
  }

    fetchStarwars() {
        axios
          .get("https://swapi.co/api/people/3/")
          //.then(results => results.text())
          .then(results => results.json())

          .then(results => {
            let x = `"${results.homeworld}"`;

            console.log(`"${results.homeworld}"`);

            axios
              .get(x)
              .then(resultshomeworld => {
                resultshomeworld.json();
                console.log(resultshomeworld);
              })

              .then(results => {
                this.setState({ homeplanet: results.name });
              });

            this.setState({ data: results, name: results.name, isLoading: false });
          });
      }

      componentDidMount() {
        this.fetchStarwars();
      }

      render() {
        console.log(this.state.homeplanet);
        return (
          <div className="App">
            <span>{this.state.name}</span>
            <div>{this.state.homeplanet}</div>
          </div>
        );
      }
    }

    export default Axiosa;

```