React css formatting conditional on ant component

Question

I am trying to send in a style property to a component and not sure what the difference is..

Why does this statement work and applies the formatting

 <Toggle
className={styles.toggle_show}  // class name gets passed as Map_toggle_show__17ukO and applied 
/>

but this statement throws errors

 <Toggle
className={isShow ? {styles.toggle_show} : {styles.toggle_hide}}
/>

If I update the second statement to

 <Toggle
className={isShow ? "styles.toggle_show" : "styles.toggle_hide"}
/>

The classNames do get passed to the component but css dont get applied.

Also why is this message coming on the const declaration

import styles from "./Map.module.scss";

const [ToggleVisibilyClass, setToggleVisibilyClass] = React.useState(
    {styles.toggle_show}
  );

(property) styles: {
    readonly [key: string]: string;
}
Parsing error: ',' expected.eslint

Answer 1

Try this:

className={isShow ? styles.toggle_show : styles.toggle_hide}