Radium: 'hover' not working in multiple using of style

[rkrishna-codal]

I am using style in multiple div and after apply , ':hover', ':focus', so it not work it has a error on console

here is example code:

Working example
export const getStyles = {
container: {
backgroundColor: '#181818',
display: 'flex',
height: '100%',
position: 'relative',
':hover':{
backgroundColor: 'blue',
}
}
}
<div> style={getStyles.container}>it's working</div>

here hover is working, everything is nice and clean

But if I use: not working
export const getStyles = {
container: {
backgroundColor: '#181818',
display: 'flex',
height: '100%',
position: 'relative',
':hover':{
backgroundColor: 'blue',
}
}
}
<div style={getStyles.container}>some text</div> // using style in multiple div
<div style={getStyles.container}>some text</div>

it's not working come with issue on console is:

(program):157 Uncaught (in promise) Error: Radium requires each element with interactive styles to have a unique key, set using either the ref or key prop. Multiple elements have no key specified.

[ianobermiller]

Read the error message. You need to add the key prop to each of your elements so that Radium knows which one is being hovered.

[chetuvineet]

HI rkrishna-codal,

You can use key. Like as

export const getStyles = {
container: {
backgroundColor: '#181818',
display: 'flex',
height: '100%',
position: 'relative',
':hover':{
backgroundColor: 'blue',
}
}
}

<div style={getStyles.container} key="key1">some text</div> // using style in multiple div
<div style={getStyles.container} key="key2">some text</div>

[vanshkapoor]

great!! thanks @chetuvineet

[vhurkadli]

@chetuvineet thank you so much. it helped me a lot
@rkrishna-codal i was also getting the same error and found the answer here since you asked the question.