Use conditional inside of another conditional react

Question

I'm attemptiong to use a conditional inside of a "parent" conditional like so:

const linkStyle = {
    
    boxShadow: selectedTheme ? `${boxShadowConcatenated + {selectedTheme.button.buttonBoxShadow ? selectedTheme.button.buttonBoxShadow : "black" }}` : undefined,
    
  };

However, the selectedTheme.button. is underlined in red.

Any ideas how to make it work?

Updated my answer

JBallin
– JBallin

2020-12-09 03:10:13 +00:00
Commented Dec 9, 2020 at 3:10 — JBallin
– JBallin, Commented Dec 9, 2020 at 3:10

Won Gyo Seo · Accepted Answer · 2020-12-09 01:32:10Z

1

How about using Optional Chaning?

for example, like below.

const linkStyle = {
  boxShadow: selectedTheme ? `${boxShadowConcatenated + selectedTheme.button?.buttonBoxShadow || "black"}` : undefined,
};

answered Dec 9, 2020 at 1:32

Won Gyo Seo

4423 silver badges9 bronze badges

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

1 Comment

Won Gyo Seo Over a year ago

@RogerStaxx selectedTheme.button?.buttonBoxShadow is actually do like selectedTheme.button && selectedTheme.button.buttonBoxShadow. but much shorter than.

JBallin · Accepted Answer · 2020-12-09 03:04:58Z

0

const getLinkStyle = (selectedTheme) => {
  const boxShadowConcatenated = '5px 10px';
  
  return {
    boxShadow: selectedTheme && `${boxShadowConcatenated} ${selectedTheme.button?.buttonBoxShadow ||  "black"}`
  }
};
  
console.log(getLinkStyle({ button: { buttonBoxShadow: 'red' } }));
console.log(getLinkStyle({ button: {} }));
console.log(getLinkStyle());

edited Dec 9, 2020 at 3:04

answered Dec 9, 2020 at 1:12

JBallin

9,9654 gold badges52 silver badges63 bronze badges

Collectives™ on Stack Overflow

Use conditional inside of another conditional react

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related