await function returns a promise and returns true even if the condition is false | React Functional Component

Question

In my JSX file, I have a function like this.

async isPresent () {
    const res = await AsyncFunction();
    if (res) {
        return true;
    }
    return false;
}

and then using it in a conditional rendering as

{  this.isPresent() &&  <div> Content </div> }

But this always returns true.

How do I solve this?

It doesn't return true, it returns a promise, which in itself is _truthy_. You need to wait for the asynchronous result. — tkausl, May 23 '22 at 06:08
How do i do that in isPresent function? **{await this.isPresent() &&
Content
}** returns a error. — komal, May 23 '22 at 06:12

Yosvel Quintero · Accepted Answer · 2022-05-23T06:48:55.840

2

You can do:

const [isPresentResult, setIsPresentResult] = useState(false);

useEffect(() => {
  this.isPresent().then(res => setIsPresentResult(res))
}, [])

// ...
{ isPresentResult &&  <div> Content </div> }

Using Class Component:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isPresentResult: false };
  }

  componentWillMount = () => {
    this.isPresent().then((isPresentResult) => 
      this.setState({ isPresentResult }));
  };

  async isPresent() {
    const res = await AsyncFunction();
    return !!res;
  }

  render() {
    return {this.state.isPresentResult && <div> Content </div>};
  }
}

edited May 23 '22 at 06:48

answered May 23 '22 at 06:13

Yosvel Quintero

18,669
5
37
46

1

const isPresentResult = this.isPresent().then(res => res); console.log('fnc', isPresentResult); The console fnc returns a promise =>>>>>>>> Promise {} [[Prototype]]: Promise [[PromiseState]]: "fulfilled" [[PromiseResult]]: false – komal May 23 '22 at 06:22
@komal Agree. I have fixed answer.. Thank you – Yosvel Quintero May 23 '22 at 06:26
I am using class component. How can we do this there, instead of using hooks? – komal May 23 '22 at 06:33
1

used this.state.isPresentResult in render and it works. Thankyou. – komal May 23 '22 at 07:05

score 1 · Answer 2 · answered May 23 '22 at 06:42

You cannot have asynchronous logic in render. You need to extract the present boolean into a state and make the asynchronous call inside something like componentDidMount and then update the present state from there.

Refer to the example below:

const sleep = (delay) => new Promise(res => setTimeout(() => res(true), delay))

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      present: false,
    };
  }

  componentDidMount() {
    sleep(1000).then((res) => {
      if (res) {
        this.setState({ present: true });
      }
    });
  }

  render() {
    return <div>{this.state.present ? "Present": "Not Present"}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

await function returns a promise and returns true even if the condition is false | React Functional Component

2 Answers2