#

React IF Else in Render()

 

Wie erstellt man ein bedingtes Rendern von HTML Elementen in React mit IF ELSE ?

 

Aufgabe:

Folgender HTML Link Button soll in React nur angezeigt werden, wenn eine Bedingung erfüllt ist.

<Link to={"//" + this.state.idarticle}>

  <Fab color="secondary" aria-label="edit" style={float: 'right' }}>

   <EditIcon />

  </Fab>

</Link>

 

 

 

Lösung:

Man erstellt einen Geschweiften Klammer und dann ? (true) : (false) Code in React

 

React Muster

 

 {

  this.state.variable ?

  (

    xxx

  )

  :

  (

    <></>

   )

 }

 

 

 

React IF Else Code in Render

 

 {

  this.state.isowner ?

  (

    <Link to={"//" + this.state.idarticle}>

      <Fab color="secondary" aria-label="edit" style={float: 'right' }}>

        <EditIcon />

      </Fab>

    </Link>

  )

  :

  (

    <></>

   )

 }

 

Mobile

.