Use if statement in React JSX

by

Use conditional rendering, and since you have no else-case, you can use && instead of a ternary operator for brevity:

It works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false.

Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.

Thus:

   <div className={"chartContent"}>
        {this.state.modalityGraph['nca'] > 0 &&
            <div className={"chart-container"}>
                <Chart
                    chartType="ColumnChart"
                    data = { this.state.modalityGraph?this.state.modalityGraph.chartData['units']:emptyDataRows }
                    options={chartOptions}
                    graph_id="modalitiesChart"
                    width="100%"
                    height="250px"
                /> 
            </div>
        }
    </div>

This will only render JSX if a condition is true. If it is false, React won’t render anything. Remember, you have to wrap inline JavaScript expressions in JSX with { … }, you can’t just have it inside JSX.

Using if/else statements directly is JSX will cause it to be rendered literally as text, which isn’t desired. You also can’t use them in inline JavaScript expressions because if statements are not expressions, so this won’t work:

{
  if(x) y
}

More Related Contents:

  1. What is component in reactjs?
  2. The useState set method is not reflecting a change immediately
  3. Call child method from parent
  4. Window is not defined in Next.js React app
  5. React Context vs React Redux, when should I use each one? [closed]
  6. Correct way to push into state array
  7. Simple Component is not rendering: React js
  8. Console.log() after setState() doesn’t return the updated state
  9. React JS – Uncaught TypeError: this.props.data.map is not a function
  10. Pass react component as props
  11. How to register event with useEffect hooks?
  12. Is there a generic way to set state in React Hooks? How to manage multiple states?
  13. React Function Components with hooks vs Class Components
  14. Can I execute a function after setState is finished updating?
  15. where is create-react-app webpack config and files?
  16. Importing multiple files in react
  17. How to render Streamable image on React coming from FastAPI server?
  18. Determine which dependency array variable caused useEffect hook to fire
  19. unable to deploy next js to azure
  20. What does “export default” do in JSX?
  21. Axios – DELETE Request With Request Body and Headers?
  22. Updating state to the same state directly in the component body
  23. reactjs and masonry layout – undefined
  24. Jest – SyntaxError: Cannot use import statement outside a module
  25. Does strict mode work differently with React 18?
  26. Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null [closed]
  27. React-Redux: Should all component states be kept in Redux Store
  28. React.js best practice regarding listening to window events from components
  29. How to render a Object in React?
  30. How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined

Leave a Comment