How to change the style of an element based on a certain condition?

Question

JavaScript

I need to recolor the adjacent div in blue on button click. The button component and the div component are on the same level.

<App>
<ComponentButton onClick = {..} />
<ConmponentDiv color = {..}/>
</App

How to correctly create an action that causes a click, and also store the color that I pass to the ConmponentDiv in redux?
div component:

const ComponentDiv = () => {
    const style = {
        color: "blue"
    }

    return (

        <div style={style}>
            hello
        </div>

    )
}

export default ComponentDiv;

button component:

const ComponentButton = () => {
    return (
            <button
                onClick={...}
                className="btn">click me
            </button>
    );
};

export default ComponentButton;

Answer 1

const ComponentDiv = () => {
    const styleBlue = {
        color: "blue"
    }
    const styleRed = {
        color: "red"
    }
    return (

        <div style={true?styleBlue:styleRed}> //вместо true доставьте свою переменную
            hello
        </div>

    )
}

export default ComponentDiv;