Преобразование компонента класса Modal в функциональный компонент с помощью хуков

Question

Я пытаюсь преобразовать модальный компонент класса MD Bootstrap в функциональный компонент с перехватами, но он не работает должным образом. когда я нажимаю на кнопку, появляется модал, но он не разочаровывает

здесь компонент класса

class ModalPage extends Component {
    state = {
        modal8: false
    }

    toggle = nr => () => {
        let modalNumber = 'modal' + nr
        this.setState({
            [modalNumber]: !this.state[modalNumber]
        });
    }

    render() {
        return (
            <MDBContainer>
                <MDBIcon far icon="eye" onClick={this.toggle(8)}>

                </MDBIcon>
                <MDBModal isOpen={this.state.modal8} toggle={this.toggle(8)} fullHeight position="top">
                    <MDBModalHeader toggle={this.toggle(8)}>MDBModal title</MDBModalHeader>
                    <MDBModalBody>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat.
                    </MDBModalBody>
                    <MDBModalFooter>
                        <MDBBtn color="secondary" onClick={this.toggle(8)}>Close</MDBBtn>
                        <MDBBtn color="primary">Save changes</MDBBtn>
                    </MDBModalFooter>
                </MDBModal>
            </MDBContainer>
        );
    }
}

export default ModalPage;

и то, что я пробовал с крючками

const ModalPage = props => {
    const [modal8, setModal8] = useState(false);

    const toggle = nr => () => {
        let modalNumber = 'modal' + nr;
        setModal8({
            [modalNumber]: !modal8[modalNumber]
        });
    }
    return(
        <MDBContainer>
            <MDBIcon far icon="eye" onClick={toggle(8)}>

            </MDBIcon>
            <MDBModal isOpen={modal8} toggle={toggle(8)} fullHeight position="top">
                <MDBModalHeader toggle={toggle(8)}>MDBModal title</MDBModalHeader>
                <MDBModalBody>
                    Lorem ipsum dolor sit amet, consectetur
                </MDBModalBody>
                <MDBModalFooter>
                    <MDBBtn color="secondary" onClick={toggle(8)}>Close</MDBBtn>
                    <MDBBtn color="primary">Save changes</MDBBtn>
                </MDBModalFooter>
            </MDBModal>
        </MDBContainer>
    )
}
export default ModalPage;

Answer 1

Использование useState ловушки следующим образом:

const [modal8, setModal8] = useState(false);

позволяет вам обновлять свое состояние следующим образом:

setModal8(true);

В вашем случае вы хотите переключить значение modal8. Вы можете легко добиться этого, используя оператор not (!), например:

setModal8(!modal8);

Answer 2

Мне просто нужно было сделать setModal8(!modal8)