React - How to render value and component under the same condition

user_10607591 0
Viewed 35

I'm trying to render a value and a component under the same condition, however, I don't know how to approach it correctly. Do I need to create a condition for each element?

<div>
    {values.cost && values.price ? values.gain+"€"+ 
    (<Button aria-label="copy1"><MdIcons.MdContentCopy/></Button>) : ""}
</div>

This way outputs 5.00€[object Object]

reactjs render
2 Answers

You can add value before button:

 {1 === 1 
  ? (<>
      <p>Hello, {props.name + props.surname}!</p> 
      <button>1</button>
      </>)
  : 'no'}

<div>
    {values.cost && values.price 
    ? (<>
           <span>{values.gain + "€"}</span>
           <Button aria-label="copy1">
               <MdIcons.MdContentCopy/>
           </Button>
       </>) 
    : ""}
</div>

This is an example at stackblitz

user_16462400

Use ternary operator with component as well, as soon as the condition will get fulfilled, the component will also get rendered.

{ condition ? <Component> : "" }
user_175343500
Related