CODEWITHSUNDEEP
javascriptreactjs
Oge Obubu
Oge Obubu

Reputation: 69

Render a React Component Using Multiple Ternary Operator

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.

Upvotes: 1

Views: 533

Answers (3)

Oge Obubu
Oge Obubu

Reputation: 69

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.

Upvotes: 1

neaumusic
neaumusic

Reputation: 10484

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

Upvotes: 1

Kanishk Anand
Kanishk Anand

Reputation: 1702

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

Upvotes: 5

Related Questions