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:
shippingData in data object I want to render <CheckoutPayment /> else ifshippingData and agree in the data object I want to console.log("Hello World") else<CheckoutShipping />My question is, is there a way I might have misused the ternary operator or I am not getting something right.
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()}</>
);
}
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
Hello WorldThanks, 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.