change className to using template literals

Question

i'm trying to learn template literals, i have project of mine i need to use template literals there, i have a question which seems very simple, but dont know what i am doing wrong

this is working:

const classes = props.classes;

return (
<List
  component="div"
  data-testid="SelectionListt"

  className={classes.selectionList__sites}
>

</List>
);

my question is how should i turn that className using template literals.

This is what i have done:

 const classes = props.classes; return ( <List component="div" data-testid="SelectionListt" className={` ${classes + ".selectionList__sites"} `}` > </List> );

this is my selectionList__sites:

 selectionList__sites: { backgroundColor: "white", "&:hover": { backgroundColor: " red", color: "black", border: "1px solid yellow", }, },

English is not my mother language so there could be mistakes.

Answer 1

Template literals have no need for regular quotes inside them, basically the entire content between backticks is handled as a string, except for values inside ${}.

Assuming that props.classes is a string, I would write your className like this:

className={`${classes}.selectionList__sites`}