Reactjs How to write the greater than 0 in jsx?

this is my current code

return (
    {num > 0 ? (
       console.log('greater than 0')
    ):(console.log('less than zero')}
  )

Reactjs How to write the greater than 0 in jsx?

this is my current code

return (
    {num > 0 ? (
       console.log('greater than 0')
    ):(console.log('less than zero')}
  )

• javascript
• reactjs

Share Improve this question Follow asked Jan 26, 2022 at 9:30 user15404864user15404864 3

• 1 May be try enclosing in a JSX tag like so: return (num > 0 ? <div>greater than 0</div> : <div>less than zero</div>); rather than console.log. – jsN00b Commented Jan 26, 2022 at 9:37
• 1 return <>{num > 0 ? <div>greater</div> : <div>less than</div>}</> definitely works. – Wiktor Zychla Commented Jan 26, 2022 at 9:41
• Try to remove the console.log call and just leave the string... – GACy20 Commented Jan 26, 2022 at 9:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

 export default function App() {
  const num = 2;
  return (
   <div>
    {num > 0 ? <h1> Greater than Zero </h1> : <h1> Zero</h1>}
   </div>
  );
 }

You mean you wanna display the evaluation on screen? There is a clean way to do that.

const App = () => {
...// logic you want

    const ment = num > 0 ? 'greater than 0' : 'less than zero';
    return <p>{ment}</p>
}

Replace > by &gt and replace < by &lt

You can use the following code as a replacement :

return (
    {num &gt 0 ? (
       console.log('greater than 0')
    ):(console.log('less than zero')}
  )

We have to first validate num exists and then do the conditional checking if it exists.

return (
{num && num > 0 ? (
   console.log('greater than 0')
):(console.log('less than zero'))})

Also you were missing a ')' at the end, which was a syntactical error