Render a React Component Using Multiple Ternary Operator

Question

I am currently having an issue rendering a component using multiple ternary operators.

Here is my code:

{data.shippingData ? (
   <CheckoutPayment data={data} setData={setData} />
  ) : data && data.agree === true ? (
                console.log("Hello World")
              ) : (
                    <CheckoutShipping setData={setData} />
                  )}

The <CheckoutPayment /> and <CheckoutShipping /> components successfully rendered without issues, the issue lies in having to render another component using this condition data && data.agree === true. In the above code, I tried using console.log to log "Hello World" but to no avail.

Here is how the data model is structured in the <CheckoutPayment />:

{shippingData: {firstName, lastName, streetAddress, state, city, phoneNumber }, agree: true}

I took the data from the <CheckoutPayment /> component into the global state where I have to pass the data to another component.

The data is available in the state. In fact, I console.log the data to confirm if it was there in which it was.

What I have in mind to achieve is:

If there is shippingData in data object I want to render <CheckoutPayment /> else if
There is shippingData and agree in the data object I want to console.log("Hello World") else
Render <CheckoutShipping />

My question is, is there a way I might have misused the ternary operator or I am not getting something right.

Kanishk Anand · Accepted Answer · 2021-11-15 17:47:39Z

5

Why not put this in a function, and call that function from render()?

getComponentToRender() {
   if(shippingData) {
     return <CheckoutPayment data={data} setData={setData} />;
   } else if(!(data || data.agree)) {
      return <CheckoutShipping />;
   } else {
     console.log("Hello World");
   }
   return null;
}

Inside your render you can do the following:

render() {
  return(
   <>{this.getComponentToRender()}</>
 );
}

edited Nov 15, 2021 at 17:47

answered Nov 15, 2021 at 17:39

Kanishk Anand

1,7121 gold badge9 silver badges17 bronze badges

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

6 Comments

nouvist Over a year ago

bro, you forgot the return keyword on the second if

Kanishk Anand Over a year ago

Thanks @nouvist. updated the same.

neaumusic Over a year ago

Yea the key here is to console log before returning null or whatever placeholder is actually supposed to render

Oge Obubu Over a year ago

Thanks for the response. I am using a functional component. Well, I have done this before using a functional component but still didn't work. I think the problem should be how I am getting the data. The structure of the data is in this format {shippingData: {…}, agree: true}

Kanishk Anand Over a year ago

@OgeObubu I think if you can share the data object, or its model, it may help

|

neaumusic · Accepted Answer · 2021-11-15 17:48:42Z

1

It doesn't have anything to do with the ternary, just that console.log() returns undefined and won't render anything. I think child.render() is what ultimately runs, the child instance is normally an object not a function

You're trying to render the result of console.log()'s return (undefined) as a sibling node (which would both need to be wrapped in a parent or a fragment like <></>

You should remove the console.log from the render return, and just

console.log before returning anything
render null or whatever placeholder error should exist there, maybe just a text node Hello World

answered Nov 15, 2021 at 17:48

neaumusic

10.5k11 gold badges61 silver badges88 bronze badges

1 Comment

Oge Obubu Over a year ago

Probably I am not being clear enough. I replaced the component that ought to be there with console.log. The component doesn't even render despite having the data. I am writing a React Multiple Form Function

Oge Obubu · Accepted Answer · 2021-11-15 20:10:41Z

1

Thanks, guys for the contributions. I do not take it likely. I have been able to figure the code out.

I changed the movement of the code. I had to return console.log to the top of the code and it worked out fine.

answered Nov 15, 2021 at 20:10

Oge Obubu

6910 bronze badges

Collectives™ on Stack Overflow

Render a React Component Using Multiple Ternary Operator

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related