Change style class dynamically in reactJS

Question

I have this button component which is used for a Calendar component's days. Below i the code for the button component:

import { html } from '../../../web_modules/htm/react.js';

export default ({ buttons }) => {
    return buttons.map(val => {
        let outDateclassName = false;
        let isSelected = '';
        if (val.flag !== 'currentMonth') {
            outDateclassName = 'outside-month';
        }
        if (val.isSelected) {
            isSelected = 'day-selected';
        }
        // isSelected = val.value;
        return html`
            <button
                className='button button--28 datepicker__day ${outDateclassName} ${isSelected} ${val.circleStart} ${val.circleEnd}'
                type='button'
                aria-label='${val.value}'
                aria-selected='false'
                disabled='${val.dateDisabled}'
                tabIndex='-1'
                onClick=${() => { isSelected = val.value; }}
                >
                <span className='button__children'>${val.value}</span>
            </button>
        `;
    });
};
Copy

val.value returns the value of the date that is clicked.

What I want is when the date is clicked , the button should turn black. day-selected is the class which has the code for black color:

.day-selected {
  color: #fff !important;
  background: #000 !important;
  border-radius: 0;
}
Copy

How do I change the code for that?

Answer 1

U must save isSelected in state. your is function component u can use react useState
if state value changed it will render exm:

import {useState} from 'react' const [isSelected, setIsSelected] = useState()