Мне нужно изменить цвет при нажатии элемента и одновременно сохранить значение элемента в массиве

Question

У меня есть список имен комнат в <Panel value="room01">. При нажатии мне нужно сохранить значение (которое находится в атрибуте) в массив и изменить цвет на зеленый. С другой стороны, мне также нужно иметь возможность отменить выбор, то есть значение должно быть удалено из массива, а цвет должен вернуться к значению по умолчанию. Как бы я достиг этого в JS / React?

С помощью приведенной ниже функции я могу получить значение для элемента

    onSelectRooms = (e) => {
        const selectedRooms = e.target.getAttribute("value");
    } 

export default class ExportReportRoomSelectionModal extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            rooms: roomOrder,
            selectedRooms: [],

        };
        this.onSelectRooms = this.onSelectRoom.bind(this);
    }

    onSelectRooms = (e) => {
        const selectedRooms = e.target.getAttribute("value");
    } 

    render() {


        return (
            <Modal>
                <Modal.Header closeButton>
                    <Modal.Title>TItle</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>Number of rooms: {this.state.rooms.length}</p>
                    <p>Rooms:</p>

                    <Grid fluid={true}> 
                        <Row className="show-grid">
                            { this.state.rooms.map((name, i ) => 
                                <Col key={i} xs={2} md={2}>
                                    <Panel onClick={this.onSelectRooms}>  
                                        <Panel.Heading value={name}> 
                                            {name}                               
                                        </Panel.Heading>
                                    </Panel> 
                                </Col>
                            )}
                        </Row>
                    </Grid>

                </Modal.Body>
            </Modal>);
    }
}```

Answer 1

1. Лучше всего использовать реквизиты имен вместо получения значения из обработчика событий.

    <Panel onClick={this.handleClick.bind(this, name)}>  

2. handleClick логика, переключение панели

    handleClick(name, e) {
        if (this.state.selectedRooms.includes(name)) {
             // remove from array
             const newSelectedRooms = this.state.selectedRooms.filter(e => e !=== name);
             this.setState({selectedRooms: newSelectedRooms}):
        } else {
             // add to array
             this.setState(prevState => {selectedRooms: [..prevState.selectedRooms, name]});
        }

3. Если вы хотите изменить цвет динамически, вы должны сделать это на основе состояния. Предположим, у вас есть имя класса, которое меняет цвет на зеленый.

    <Panel
        onClick={this.handleClick.bind(this, name)}
        className={this.state.selectedRooms.includes[name] ? 'green' : ''}
    >