Tags: "frontend", "javascript", "react", "reconciliation-key", access_time 1-min read

Conditional Render in React

Created: August 28, 2018 by [lek-tin]

Last updated: August 28, 2018

In react, sometimes we need to render a component based on some flag, for example, we need to display a different set of information to the admin users than the normal users. We have a prop called isAdmin

render () {
  const { isAdmin } = this.props
  return (
    <div>
      { isAdmin
        ? <CustomeComponent {...propSetA} / >
        : <CustomeComponent {...propSetB} / >
      }
    </div>
  )
}

Looks good right, but there is one problem.