Skip to content

Instantly share code, notes, and snippets.

@TyIsI
Created February 6, 2021 06:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TyIsI/4a7ef874641f51199813989bdb909e76 to your computer and use it in GitHub Desktop.
Save TyIsI/4a7ef874641f51199813989bdb909e76 to your computer and use it in GitHub Desktop.
React Conditional Wrapper Component

Conditional Component

Usage

  • Import as regular
  • Wrap a component with a conditional
const Example = (props) {
  return (
    <>
      <Conditional condition={this.props.exampleValue === true}>
        <span>This is the true scenario</span>
      </Conditional>
      <Conditional condition={this.props.exampleValue === false}>
        <span>This is the false scenario</span>
      </Conditional>
    </>
  )
}
  • ???
  • PROFIT!
import React, { Component } from 'react'
class Conditional extends Component {
render () {
if (this.props.condition === false)
return null
return (
<>
{this.props.children}
</>
)
}
}
export default Conditional
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment