node.jsreactjsimmutability-helper

Immutability-Helper Updating One Property but not Others?

I have a jsx style that looks like this:

let styles = {
    appBarStyle: {
        display: 'flex',
        flexWrap: 'nowrap',
        WebkitFlexFlow: 'nowrap',
        flex: '1 1 0%',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '0',
        margin: '0',
        listStyle: 'none',
        backgroundColor: '#00bcd4',
        fontFamily: 'Roboto',
        minHeight: '64px',
        color: 'white',
        fontSize: '2em',
        margin: '0px',
        padding: '0px',
        width: '100%',
        zIndex: '2',
        position: 'static',
        top: 'auto',
        left: 'auto',
        right: 'auto'
    }
};

I want it to be position:fixed on smartphones and IOS, but not on desktops.

So I have some code that uses immutability-helper:

if (useFixedMenuBar) {
    styles = update(styles, {
        appBarStyle:{top: {$set: '0px'}},
        appBarStyle:{left: {$set: '0px'}},
        appBarStyle:{right: {$set: '0px'}},
        appBarStyle:{position: {$set: 'fixed'}},
}

After the call to update, the position property is correctly updated to fixed, but the top, left, and right properties are not updated to 0px -- they still are set to auto.

What am I missing?

enter image description here

Solution

  • I think you're overwriting what's getting set to the appBarStyle key so only the last one is set, and then the update happens. Try:

    styles = update(styles, {
    appBarStyle:{
        top: {$set: '0px'},
        left: {$set: '0px'},
        right: {$set: '0px'},
        position: {$set: 'fixed'},
    }
})