Я пытаюсь открыть форму при нажатии на кнопку, используя модал реакции начальной загрузки, но она не отображается.Форма - это отдельный компонент, определенный в другом файле.
Я импортировал форму и модал и пытаюсь выполнить рендеринг следующим образом
import AddTaskForm from './Forms/taskForm';
import { Modal } from 'react-bootstrap';
{
this.state.open &&
<Modal
show={this.state.open} onHide={this.handleClose}>
<Modal.body>
<AddTaskForm />
</Modal.body>
</Modal>
}
Состояния и функции определены как
constructor(){
super();
this.state={
// visibility: false,
open: false
}
}
handleOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
Кнопка реализована в виде
<Button variant="contained" color="" className={classes.button} onClick={this.handleOpen}>
<AddIcon className={classes.leftIcon} />
Add a task
</Button>
При нажатии кнопки появляется пустая страница.Куда я иду не так ??Это мой первый опыт в реакции, и поэтому мне трудно отлаживать.Спасибо.