How to write nested ternary operator in react?

Question

I have to write a condition for showing style on my div but I am making some mistake due to which it is not working properly. Please help me to correct this syntax. This is my code

<div
style={item.settings && 'backdropSettings' in item.settings ? { 
item.settings.backdropSettings.value.includes('#') ? 
{background:item.settings.backdropSettings.value} :
{backgroundImage: `url(${item.settings.backdropSettings.value})`}
} : null}
> 
</div>

Your ternary operator is hard to read/understand. Don't use it. Use simple if {} else {} inside call of function — Justinas
– Justinas, Commented Dec 17, 2020 at 10:19
@Justinas yeah i can write if{} else {} statement. But I want to use ternary operator. So can help me for this. for writing syntax. — Dheeraj Kumar
– Dheeraj Kumar, Commented Dec 17, 2020 at 10:26
@DheerajKumar condition ? (condition ? true : false) : (false) — Justinas
– Justinas, Commented Dec 17, 2020 at 10:30
@Justinas but during writing my syntax I am making error during writing curly braces. make you help me to make it correct. — Dheeraj Kumar
– Dheeraj Kumar, Commented Dec 17, 2020 at 11:02

JO3-W3B-D3V · Accepted Answer · 2020-12-17 17:25:55Z

1

If you do complicated calculation do not put it in your render , put it before , it's way simpler, that's why you can't see your mistake.

Try something like this (check how it's written though, not sure it's 100% ok)

const getStyle = (item) => {
    if (item.settings && 'backdropSettings' in item.settings) {
        const { backdropSettings } = item.settings;
        
        if (backdropSettings.value.includes('#')) {
            return `backgroundImage:${item.settings.backdropSettings.value}`
        } else {
            return `backgroundImage:url(${item.settings.backdropSettings.value})`
        }
    } 
    return null
}

return(
    <div style={getStyle(item)}>
    </div> 
);

This is way more readable and you can find your mistake easily. Hope it helps.

edited Dec 17, 2020 at 17:25

JO3-W3B-D3V

2,13213 silver badges31 bronze badges

answered Dec 17, 2020 at 10:25

François Richard

7,08411 gold badges47 silver badges83 bronze badges

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

Collectives™ on Stack Overflow

How to write nested ternary operator in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related