Динамически изменить className в элементе jsx

Question

Я хочу, чтобы, когда я изменял значение pros.show (просто оно дает true или false), затем динамически добавлял класс к элементу. Как я могу сделать это с помощью метода sideDrawer?

import React, { Component } from 'react';

import './SideDrawer.css';

class SideDrawer extends Component {
    state = {  }

    constructor(props) {
        super(props)

    }

   sideDrawer = () => {
        let drawerClasses = ['side-drawer'];
        if(this.props.show) {
            drawerClasses.push('open');
        }

        return drawerClasses.join(" ");
    };


    render() { 

        return ( 
            <nav className={this.sideDarwer}>
                <ul>
                    <li><a href="/">Check Paper</a></li>
                    <li><a href="/">Add Paper</a></li>
                    <li><a href="/">Modify Paper</a></li>
                </ul>
            </nav>
         );
    }
}

export default SideDrawer;

Answer 1

---

    <nav className={`side-drawer ${this.props.show && 'open'}`}>