Conditional rendering in React based on state

Question

I'm sending an API request and render its result in to UI.

Now, for the error-handling, I wanted that if there is an error a div which contains an error message gets rendered in to the UI.

To achieve this I wrote the following ternary condition:

const showError = this.state.error
? `<div className="error-container">
    Error:
      <p>{this.state.error}</p>
   </div>`
: '';

And then used this inside my render method: {showError}

But React see the result as a string and renders the following to the UI:

What am I doing wrong?

Umair Farooq · Accepted Answer · 2019-02-17 13:25:35Z

2

In you render method you can do following:

render() {
  return(
   // ... other components
   {this.state.error && (
     <div className="error-container">
       Error:
       <p>{this.state.error}</p>
     </div>
    )}
    // ... 
  )
}

answered Feb 17, 2019 at 13:25

Umair Farooq

1,8331 gold badge14 silver badges17 bronze badges

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

2 Comments

user1941537 Over a year ago

Wow! Thanks. I wasn't aware of this method. What is it called?

Umair Farooq Over a year ago

It is Inline If with Logical && Operator You can check it reactjs.org/docs/…

Shubham Khatri · Accepted Answer · 2019-02-17 13:26:49Z

2

Problem is that you made showError a string by wrapping the content within ``(backticks) and it no longer remains a JSX expression

Use () instead. Also when you don't want to return anything, you should return null instead of an empty string

const showError = this.state.error
? (<div className="error-container">
    Error:
      <p>{this.state.error}</p>
   </div>)
: '';

answered Feb 17, 2019 at 13:26

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Collectives™ on Stack Overflow

Conditional rendering in React based on state

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related