changing checkbox background color width styled components - reactjs

Question

I want to control the background color of checkbox but something is wrong.
first,
I have a data like
export const data = [
{id: 1, checked: true},
{id: 2, checked: false},
{id: 3, checked: false},
]
and a component got this data is like
import {data} from "./data"
(...)
{data.map(item => <label key={item.id}> <input type="checkbox" checked={item.checked}/> </label>}
when i was trying to change the background color of label,
i wrote code like this...
background: ${props => props.checked ? "#000" : "transparent"};
but this doesn't work well. the label has background color transparent only. how can i handle this??

Answer 1

in this case you could just use add style={{background: item.checked ? "#000" : 'transparent'}} to your label.
props refers to the values passed into a react component, in this case we're just using a regular label.
FYI - since you're hard-coding your data, your checkboxes won't be changeable - if thats something you need, you'll probably want to look at saving your data as a state, then modifying that based on the checkboxes being checked/unchecked.
const data = [
{id: 1, checked: false},
{id: 2, checked: true},
{id: 3, checked: false},
]
const element = (
<div>
{data.map( item => (
<label
key={item.id}
style={{background: item.checked ? "#000" : 'transparent'}}
>
<input type="checkbox" checked={item.checked} />
</label>
))}
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);