undefined React JS variable

Question

this is my first time coding in Javascript/React JS so I'm not sure what is wrong here. getLicensees() send a GET request it my API and returns all the licensees. This works so far, also the console logs are working and printing the correct value.

constructor(props) {
super(props);

this.state = {licensees: []};

let licenseeResponse = LicensingService.getLicensees()
  .then(licensees => {
    this.state.licensees = licensees;
    console.log("component", licensees);
    console.log(licensees[0].city);
  });
}

I'm trying to generate a table out of all the information’s inside my licensees object. But I can’t use this.state.licensees[0].city inside my render() method.

render() {
return (
  <main id="content">
    <div id="head">
      <h4 className="headline">
        Liste aller Lizenznehmer
      </h4>

      <div className="licenseeTable">
        <table>
          <tr>
            <th>Lizenz nehmer</th>
            <th>Aktuelles Zertifikat</th>
            <th>Details</th>
          </tr>
          <tr>
            <td>{this.state.licensees[0].city}</td>
            <td>test2</td>
            <td>test3</td>
          </tr>
        </table>
      </div>
    </div>
  </main>
);
}

how can I do this properly?

--My solution:

componentDidMount() {
console.log('component did mount..', this);
LicensingService.getLicensees()
  .then(licensees => {
    this.setState({licensees});
    console.log(licensees);
  });
}

...

{
            this.state.licensees.map(license => {
              return <tr>
                <td>{license.company}</td>
                <td>{license.testCertificate.toString()}</td>
                <td>{license.city}</td>
              </tr>
            })
          }

this.setState({licensees}) is the correct way to assign value to the state object.

*Offtopic : You might want to look at the official docs, I think there is a minor issue in your set state logic, reactjs.org/docs/state-and-lifecycle.html, although the state in React is an object and it's ok to set it directly in the constructor, it's more appropriate to use the setState method outside the constructor (for exmaple in the componentDidMount hook) when fetching some data (i assume getLicensees is some async code) — Християн Христов
– Християн Христов, Commented Jun 4, 2018 at 10:34
Have you changed your setState to this this.setState({licensees}); ?? — supra28
– supra28, Commented Jun 4, 2018 at 12:55

Shubham Khatri · Accepted Answer · 2018-06-04 12:11:48Z

4

The problem is that although you have your API request in constructor, it will return a response only after the render cycle and since you are directly mutating state in the resolved promise, a re-render is not called.

What you need to do is to have the API call in componentDidMount lifecycle method and update your state using setState

constructor(props) {
   super(props);

   this.state = {licensees: []};

}

componentDidMount() {
    LicensingService.getLicensees()
      .then(licensees => {
        this.setState({licensees});
        console.log("component", licensees);
        console.log(licensees[0].city);
    });
}

edited Jun 4, 2018 at 12:11

answered Jun 4, 2018 at 10:28

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

7 Comments

Xxtreem Over a year ago

Thank you! This helps me :)

Shubham Khatri Over a year ago

Glad to have helped :-)

Xxtreem Over a year ago

but there is another problem, he’s saying that: Objects are not valid as a React child (found: object with keys {city, ...} . If you meant to render a collection of children, use an array instead. I tried to form it into an array but it’s says it can’t do it because its undefined I tried to form it into an array but its says it cant do it becouse its undefined

Shubham Khatri Over a year ago

can you add your licences array in the question

Xxtreem Over a year ago

Edit the wrong post facepalm, see it now on my original question :)

|

supra28 · Accepted Answer · 2018-06-04 10:41:34Z

1

First you want to move the api call to componentDidMount instead of doing it in a constructor, doing so wont work as your component would already have rendered before you get the data.

Then you need to use setState to cause your render function to be called so that the updated value is displayed. like this :

this.setState({licensees}); instead of mutating the state directly like

this.state.licensees = licensees;

Collectives™ on Stack Overflow

undefined React JS variable

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related