Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

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>

 

 

 

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>

  )

  :

  (

    <></>

   )

 }

 

Mobile

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de