Question: This is my code I just need to fetch data from the API and want to map it but I cannot do it I don't know why. I have gone though all the video tutorials but still couldn't find my problem.

```
    class App extends Component {
    state = {
        names: [],
        isLoaded: false,
    }
    constructor(props) {
      super(props);
    }
    componentDidMount() {
      fetch("https://dog.ceo/api/breeds/list/all")
      .then(res => res.json())
      .then(name => {
        this.setState({
          names: name,
          isLoaded: true,
        })
      });  
    }
    renderNames() {
    if(this.state.names.length > 0) {
      return this.state.names.map((breed) =>
        <div key={breed.message}>
        {breed.message}
        {breed.status}
        </div>
      )  
    }
    else{
        return;

    render(){

```

this isloaded is also an issue every time I find a way this states ruins everything 

```
      if (!this.state.isLoaded)  {
        return <div>loading....</div>
      }
      else{
        return (
          <div className="App">
          <h1>Choose a name of breed</h1>
          {this.renderNames()}

          </div>

```

Answer: 
Bind `this` to `renderNames` in constructor. 
like: 

`constructor(props) {
 super(props);
 this.renderNames = this.renderNames.bind(this)
}`

OR

Re-write `renderNames` as a arrow function.
e.g.

`renderNames = () => {
 //Your code.
}`
First things first... Re-arrange your code.. Place your state within constructor.. Then... Console.log your name value from the promise and see if the data is actually present... Then we will know what next to do.