CodeDocu.com

 

How to create conditional rendering of HTML elements in React with IF ELSE ?

 

Task:

The following HTML Link Button should only be displayed in React if a condition is met.

 

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

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

   <EditIcon />

  </Fab>

</Link>

 

React IF Else in Render()

 

 

Solution:

You create a curly brace and then ? (true) : (false) code in React

 

React Pattern

 

 

 {

  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>

  )

  :

  (

    <></>

   )

 }

 

React IF Else in Render()


Software Entwicklung Stuttgart Nürtingen
Suche Projekte C#, WPF, Windows App,ASP.Net, vb.Net, WinForms, SQL Server, Access, Excel