I am making a dark mode in react and passing the state as a prop in a component but its giving an error.

I tried putting code under different situations but got no success

here is the code in which I am getting error

<nav className={'navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}'}>

that's what I am getitng
Unexpected template string expression no-template-curly-in-string

CodePudding user response：

The answer is already given. I'll not repeat.

Still I'll give you this suggestion, you can use ternary operator to render className based on the props.mode value:

<nav className={`navbar navbar-expand-lg ${props.mode === 'light' ? 'navbar-light bg-light' : 'navbar-dark bg-dark'}`}>

CodePudding user response：

You are getting errors because you are using single quotes '' instead of backticks `` , your code should look like this:

<nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>