How do I use styled-component attributes to set the selected property of my styled option so that the option is selected within the select element depending on whether or not the isSelected property is truthy?
Right now I have this:
export const MyOption = styled.option.attrs(props => ({
selected: {props.isSelected ? "selected" : ""}
})``;
>Solution :
What you’ve got there is actually almost exactly how you do it.
The only thing you need to change is that you are setting the attrs selected to an object using curly-brackets {} when you should be using normal brackets () to do the logic.
export const MyOption = styled.option.attrs(props => ({
selected: (props.isSelected ? "selected" : ""),
}))``;