Combining objects with object destructuring and the turnary operator

Question

I'm trying to detemine the style based on a few boolean variables (sticky and isHidden).

I know that I can combine 2 objects by using {...object1, ...object2}

I am trying to apply the same logic to a nested object, so that style would be the result of combining the objects styles.stickyNav, styles.hide and styles.navBar if both the booleans are true, and but just style.navBar if neither are true

const styles = {
  hide: {  
    top: -60
  },
  stickyNav: {
      height: 60,
      position: fixed
  },
  navBar:{
    display: 'flex',
    width: '100%',
    background: 'white',
    boxShadow: "0 10px 6px -6px #777"
  }
}

const style={
  sticky ? {...styles.stickyNav} : {},
  isHidden && sticky ? {...styles.hide} : {},
  {...style.navBar}
}

---

Example output

If both booleans are true, style should be

{
  top: -60
  height: 60,
  position: fixed
  display: 'flex',
  width: '100%',
  background: 'white',
  boxShadow: "0 10px 6px -6px #777"
}

If neither are true, then style should be

{
  display: 'flex',
  width: '100%',
  background: 'white',
  boxShadow: "0 10px 6px -6px #777"
}

if only sticky is true, then style should be

{
  height: 60,
  position: fixed
  display: 'flex',
  width: '100%',
  background: 'white',
  boxShadow: "0 10px 6px -6px #777"
}

Answer 1

I'd go with the following, just using the spread operator in an initially empty object

const styles = {
  hide: {  
    top: -60
  },
  stickyNav: {
      height: 60,
      position: 'fixed'
  },
  navBar:{
    display: 'flex',
    width: '100%',
    background: 'white',
    boxShadow: "0 10px 6px -6px #777"
  }
}

var sticky = true;
var isHidden = true;

/***Original ***/
/*const style={
  ...(sticky ? styles.stickyNav : {}),
  ...(isHidden && sticky ? styles.hide : {}),
  ...styles.navBar
}*/

/*Improved Based on comment*/
const style={
  ...(sticky && styles.stickyNav),
  ...((isHidden && sticky) && styles.hide),
  ...styles.navBar
}



console.log(style);

Note there were a couple of console errors that needed fixing

Answer 2

I would try something like:

const style =
  isHidden && sticky
    ? { ...styles.hide, ...styles.stickyNav, ...styles.navBar }
    : sticky
    ? { ...styles.stickyNav, ...styles.navBar }
    : style.navBar;

Answer 3

This should work.

const style = sticky && isHidden ?
    { ...styles.hide, ...styles.stickyNav, ...styles.navBar   } :
    sticky ? { ...styles.stickyNav, ...styles.navBar } : { ...styles.navBar };

let sticky =  true;
let isHidden = true;

const styles = {
  hide: {  
    top: -60
  },
  stickyNav: {
      height: 60,
      position: 'fixed'
  },
  navBar:{
    display: 'flex',
    width: '100%',
    background: 'white',
    boxShadow: "0 10px 6px -6px #777"
  }
}

const style = sticky && isHidden ?
    { ...styles.hide, ...styles.stickyNav, ...styles.navBar   } :
    sticky ? { ...styles.stickyNav, ...styles.navBar } : { ...styles.navBar };

console.log(style);