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>
)
:
(
<></>
)
}
|
