Display data from an API when clicking a button. Using ReactJS

Question

I am trying to display the data of each character when I click the Info Button. I know it is because in the onButtonClickHandler function it can not see the state. I have also tried this.state.person but it gives me an error saying "can not read state". And if I try just state.person it will give me "undefined".

What is the best way to do that? Thank you

API Link: https://swapi.dev/people/

import React from "react";

export default class FetchActors extends React.Component {
  state = {
    loading: true,
    person: null
  };

  async componentDidMount() {
    const url = "https://swapi.dev/api/people/";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ person: data.results, loading: false });
  }

  render() {
    if (this.state.loading) {
      return <div>loading...</div>;
    }

    if (!this.state.person.length) {
      return <div>didn't get a person</div>;
    }

   function onButtonClickHandler(state) {
      console.log(state.person);
    };


    return (
      <div>
        <h1>Actors</h1>
        {this.state.person.map(person =>(
        <div>
          <div>
            {person.name}
            <button onClick={onButtonClickHandler}>Info</button>

          </div>

        </div>
        ))}
        <button onClick={onButtonClickHandler}>Enter</button>
      </div>
    );
  }
}

Matthew Lin · Accepted Answer · 2020-11-01 23:51:18Z

2

Please correct me if I'm wrong

The most likely reason why you are seeing this is because of the way javascript internally works. The syntax:

function xyz() {

}

has an implicit this

Maybe try changing your code from:

function onButtonClickHandler(state) {
  console.log(state.person);
};

to:

const onButtonClickHandler = () => {
  console.log(this.state.person);
};

Comments

Linda Paiste · Accepted Answer · 2020-11-02 19:53:06Z

1

You have defined your function onButtonClickHandler as a function that takes one argument, and logs the person property of that argument. The argument state in your function has nothing to do with the state of your component. As javascript sees it, they are two totally unrelated variables which just happen to have the same name.

function onButtonClickHandler(state) {
   console.log(state.person);
};

When button calls onClick, it passes the event as the argument. So your onButtonClickHandler is logging the person property of the event, which obviously doesn't exist.

Since you are not using any information from the event, your function should take no arguments. As others have said, you should also move this function outside of the render() method so that it is not recreated on each render. The suggestion to use bind is not necessary if you use an arrow function, since these bind automatically.

export default class FetchActors extends React.Component {
  /*...*/

  onButtonClickHandler = () => {
     console.log(this.state.person);
  };

}

Inside render()

<button onClick={this.onButtonClickHandler}>Enter</button>

You could also define the function inline, as an arrow function which takes no arguments:

<button onClick={() => console.log(this.state.person)}>Enter</button>

If you are new to react, I recommend learning with function components rather than class components.

Edit:

Updating this answer regarding our comments. I was so caught up in explaining the errors from doing the wrong thing that I neglected to explain how to do the right thing!

I am trying to display the data of each character when I click the Info Button.

Once we call the API, we already have the info loaded for each character. We just need to know which one we want to display. You can add a property expanded to your state and use it to store the index (or id or name, whatever you want really) of the currently expanded item.

When we loop through to show the name and info button, we check if that character is the expanded one. If so, we show the character info.

Now the onClick handler of our button is responsible for setting state.expanded to the character that we clicked it from.

{this.state.person.map((person, i) =>(
<div>
  <div>
    {person.name}
    <button onClick={() => this.setState({expanded: i})}>Info</button>
    {this.state.expanded === i && (
      <CharacterInfo
        key={person.name}
        person={person}
      />
    )}
  </div>

CodeSandbox Link

edited Nov 2, 2020 at 19:53

answered Nov 2, 2020 at 0:35

Linda Paiste

42.6k8 gold badges81 silver badges118 bronze badges

7 Comments

Beginner Over a year ago

I tried something similar to this but it gives me "Failed to compile" on the onButtonClickHandler = () => { console.log(this.state.person); };

Linda Paiste Over a year ago

It should be fine. Are you putting that function at the top-level of your component?

Linda Paiste Over a year ago

I think what you are actually trying to do is something like this, but with the info formatted, obviously.

Beginner Over a year ago

YESSSSSS, exactly. Should I use a <ul> tag to display the info formatted?

Linda Paiste Over a year ago

You could do that. Or maybe a table. If you're showing more than 1 or 2 stats I would actually make a function component CharacterInfo that takes the character properties as props and handles rendering the info. Then from your main component you just call <CharacterInfo {...person} /> using the spread operator ... to pass down the values of person as individual props.

|

Abdul Ahmad · Accepted Answer · 2020-11-02 00:46:47Z

1

there are a few ways you can resolve your issue; I'll give you the more common approach.

You want to define your click handler as a class (instance) method, rather than declare it as a function inside the render method (you can define it as a function inside the render method, but that's probably not the best way to do it for a variety of reasons that are out of scope).
You will also have to bind it's 'this' value to the class (instance) because click handlers are triggered asynchronously.
Finally, add a button and trigger the fetch on click:

class Actors extends React.Component {
  state = {
    loading: false,
    actors: undefined,
  };

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

  async fetchActors() {
    this.setState({ loading: true });
    const url = "https://swapi.dev/api/people/";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ actors: data.results, loading: false });
  }

  render() {
    console.log('Actors: ', this.state.actors);
    return <button onClick={this.fetchActors}>fetch actors</button>;
  }
}

edited Nov 2, 2020 at 0:46

answered Nov 1, 2020 at 23:53

Abdul Ahmad

10.1k16 gold badges76 silver badges136 bronze badges

2 Comments

Beginner Over a year ago

This give me an error on bind. "TypeError: Cannot read property 'bind' of undefined" in this line of code ` this.handleClick = this.handleClick.bind(this);`

Abdul Ahmad Over a year ago

sorry about that, i had the method name wrong. it should be fetchActors not handleClick - see the updated code

tim · Accepted Answer · 2020-11-02 04:21:31Z

Sometimes i takes react a min to load the updated state.

import React from "react";

export default class FetchActors extends React.Component {
  state = {
    loading: true,
    person: null
  };

  async componentDidMount() {
    const url = "https://swapi.dev/api/people/";
    const response = await fetch(url);
    const data = await response.json();
    if(!data.results) { // throw error }
    this.setState({ person: data.results, loading: false }, () => {
  console.log(this.state.person) // log out your data to verify
});
  }

  render() {
    if (this.state.loading || !this.state.person) { // wait for person data
      return <div>loading...</div>;
    }else{


   function onButtonClickHandler(state) { // just make a componentDidUpdate function
      console.log(state.person);
    };


    return (
      <div>
        <h1>Actors</h1>
        {this.state.person.map(person =>(
        <div>
          <div>
            {person.name}
            <button onClick={onButtonClickHandler}>Info</button>

          </div>

        </div>
        ))}
        <button onClick={onButtonClickHandler}>Enter</button>
      </div>
    );
  }
}}

Collectives™ on Stack Overflow

Display data from an API when clicking a button. Using ReactJS

4 Answers 4

Comments

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related