Search code examples
reactjsrender

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

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]

Solution

  • 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