React conditional rendering and return the value

Question

Need a little guidance with conditional rendering in react


class Car extends React.Component {
id = '123456'

  render() {

   if("id".includes("1") === true){

    return <h2>$$${id}</h2>;

}
else{
         return <h2>{id}</h2>;
  }
}

For rendering $$$ for certain condition , apart from using if else and rendering is there any way to conditionally render ??? a better way and the return can be quite long in big applications is there a way to write conditional and return the value according to it?

NGY · Accepted Answer · 2022-05-26 00:04:33Z

2

Your question is not very clear so do well to add some clarity if my answer is not satisfactory.

When you want to conditionally render in react you can use the short-circuiting property of the && operator.

For example:

(false && "Logged In")
//Logged In

So using this idea, you can do the same for components

function App(props) {
    let element
    if(props.loggedIn) {
        element = <div>Logged In</div>
    } else {
        element = <div>Not Logged In</div>
    }
    return element
}

simply becomes

function App(props) {
    return (
        <div>
            {
                props.loggedIn && 
                <h3>You're logged in as {props.data.username}</h3>
            }
        </div>
    )
}

answered May 26, 2022 at 0:04

NGY

988 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Go-learn Over a year ago

its a different perspective, thanks for taking time and explaining @NGY

gloo · Accepted Answer · 2022-05-25 23:58:49Z

1

There's a variety of ways to do conditional rendering. Here is one example with a ternary operator for simple cases:

    render() {
         return <h2>{id.includes("1") ? "$$$" : ""}{id}</h2>
    }

You can also look into using a switch statement, where you move the conditional logic outside of the render function.

answered May 25, 2022 at 23:58

gloo

7214 silver badges12 bronze badges

2 Comments

Go-learn Over a year ago

if id is string/number , will includes still work ?

gloo Over a year ago

includes works with strings, so you can convert id to a string if it isn't already with String(id)

Collectives™ on Stack Overflow

React conditional rendering and return the value

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related