How to conditionally display custom tag in react jsx

Question

I'm trying to conditionally display a custom tag based on the value of a variable in React.

The value is coming from the form context.

ex:

return( 
   ...

   (formContext = {
       const variable = getVariable() // returns a string

   
....

   <custom tag> </custom tag>

I want to display custom tag only if the variable value matches a certain string for ex: if variable is "DISP" only then display the tag.

please & thanks.

please let me know if you need any more information.

Answer 1

Use conditional rendering

{ (variable === "DISP") && <custom tag> </custom tag> }

Answer 2

you can use conditional rendering for this.

return (
  { (variable === "string") && <customTag></customTag> }
)

To learn more about custom rendering, you could read this: https://reactjs.org/docs/conditional-rendering.html#:~:text=Inline%20If%20with%20Logical%20%26%26%20Operator&text=Therefore%2C%20if%20the%20condition%20is,will%20return%20the%20falsy%20expression .