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:

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

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

Answer 1

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()}</>
 );
}

Answer 2

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

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

Answer 3

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.