Unable to pass prop into dict in react-CodePudding

I am trying to change the colour of a div in react by using a dict.

import * as React from 'react'

import {
    container
} from './zoneButton.module.css'

const ZoneButton = ({ colour }) => {

    const colourPrimaryDict = {
        'pink': 'var(--pastel-pink-primary)'
    }
    const colourSecondaryDict = {
        'pink': 'var(--pastel-pink-secondary)'
    }

    return (
        <div className={container} style={{
            backgroundColor: colourPrimaryDict[{ colour }],
            color: colourSecondaryDict[{ colour }]
        }}>
            { colour }
        </div>
    )
}

export default ZoneButton

When I enter 'pink' into the dict the colour of the div changes however when i try and pass through the { colour } prop that is given the string 'pink' the dict dose not return the requested colour.

<ZoneButton colour={'pink'}/>

If this is a bad way of doing things, is there a better way?

CodePudding user response：

The syntax for dynamically trying to an object property is slightly off:

import * as React from 'react'

import {
    container
} from './zoneButton.module.css'

const ZoneButton = ({ colour }) => {

    const colourPrimaryDict = {
        'pink': 'var(--pastel-pink-primary)'
    }
    const colourSecondaryDict = {
        'pink': 'var(--pastel-pink-secondary)'
    }

    return (
        <div className={container} style={{
            backgroundColor: colourPrimaryDict[colour],
            color: colourSecondaryDict[colour]
        }}>
            { colour }
        </div>
    )
}

export default ZoneButton

Hopefully that helps!