title: How to render conditional jsx using ternary operator in react?
body: <p>i want to use ternary operator for conditional rendering of jsx using react and javascript.</p>
  <p>below is my code,</p>
  <pre><code>const Parent = () =&gt; {
      return (
          &lt;Child 
              isChecked={true}
              isMany={true}
          /&gt;
      );
  };
  
  const Child = (props) =&gt; {
      const name=defaultTo(props.optionName, 'name');
      return (
          {props.isMany
              ? `${props.getValue().length} ${name}${
                  props.getValue().length &gt; 1 ? 's' : ''
              } selected`
              : props.getValue()[0].label
          }
      );
  }
  </code></pre>
  <p>the above code works and it returns output like &quot;2 names selected&quot; or &quot;1 name selected&quot; based on getValue length. here Child component is reusable and isChecked prop is optional. it may or maynot be passed as prop to this Child component.</p>
  <p>Now if the isChecked prop is true, i want to display output like &quot;2 selected&quot; or &quot;1 selected&quot; which depends on getValue length.</p>
  <p>how can i modify the above code to do so.
  could someone help me with this. thanks.</p>
  <p><strong>EDIT:</strong>
  below is what i have tried.</p>
  <pre><code>const Child = (props) =&gt; {
      const name= props.isChecked ?
                  defaultTo(props.optionName, '') 
                  : defaultTo(props.optionName, 'name');
      return (
          {props.isMany
              ? `${props.getValue().length} ${name}${
                  (props.getValue().length &gt; 1 &amp;&amp; !isChecked) ? 's' : ''
              } selected`
              : props.getValue()[0].label
          }
      );
  }
      
  </code></pre>
  <p>this kind of works but still displays that 's' if more than one count so the output is like below</p>
  <p>1 selected
  2 s selected
  3 s selected
  ....</p>