React how to render async data from api?

Question

I am using preact(light version of react) but syntax is almost the same. I am having an issue displaying verified after setting state from promise result. This is my container component:

import { h, Component } from "preact";
import { VerifierService } from "services/verifierService";
var CONFIG = require("Config");

//import * as styles from './profile.css';

interface PassportProps { token?: string; path?: string }
interface PassportState { appId?: string; verified?: boolean }

export default class Passport extends Component<PassportProps, PassportState> {
  constructor(props) {
    super(props);

    this.state = { appId: CONFIG.Settings.AppId };
  }

  async componentDidMount() {
    console.log("cdm: " + this.props.token);

    if (this.props.token != undefined) {
      await VerifierService.post({ token: this.props.token })
        .then(data => {
          this.setState({ verified: data.result });
          console.log(JSON.stringify(data, null, 4));
        })
        .catch(error => console.log(error));
    }
  }

  render() {
    return <div>Test: {this.state.verified}</div>;
  }
}

I can see console.log as true inside of promise result, but i can't display it in view.

What does your data look like in the console.log?

Tholle
– Tholle

2018-06-30 16:45:09 +00:00
Commented Jun 30, 2018 at 16:45 — Tholle
– Tholle, Commented Jun 30, 2018 at 16:45
"true" as boolean

sensei
– sensei

2018-06-30 16:51:48 +00:00
Commented Jun 30, 2018 at 16:51 — sensei
– sensei, Commented Jun 30, 2018 at 16:51

Tholle · Accepted Answer · 2018-06-30 16:54:20Z

2

Your data in your console.log is true, so therefor data.result will give you undefined. Try to just set the data in setState.

await VerifierService.post({ token: this.props.token })
  .then(data => {
    this.setState({ verified: data });
    console.log(JSON.stringify(data, null, 4));
  })
  .catch(error => console.log(error));

answered Jun 30, 2018 at 16:54

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

3 Comments

sensei Over a year ago

Actually data is true but that doesn’t map with my model since model result is Boolean, have to fix that. Can you confirm life cycle is ok though?

Tholle Over a year ago

@AmelSalibasic Yes, your code looks fine. Since you are using async/await you could also write const data = await VerifierService.post({ token: this.props.token }); this.setState({ verified: data }); if you think that's more readable.

sensei Over a year ago

also boolean cannot be rendered, we have to convert it to string

Collectives™ on Stack Overflow

React how to render async data from api?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related