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

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]

CodePudding user response：

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

CodePudding user response：

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

{ condition ? <Component> : "" }