I'm having a problem with a modal which doesn't show up correctly. When I click the button the screen becomes all gray without showing me the content of the modal and when I try to insert a text in the input lets me do it, even if you don't see what you write.
Here's the code to understand the logic:
And there's my App.js (List.js in that case) code :
import React, { Component } from "../../../node_modules/react";
import { Container, Row, Col } from "reactstrap";
import ModalForm from "../../Components/Modals/Modal";
import DataTable from "../../Components/Tables/DataTable";
import { CSVLink } from "react-csv";
class List extends Component {
state = {
items: []
};
getList = () => {
fetch("http://localhost:5000/api/azienda")
.then(res => res.json())
.then(items => this.setState({ items }))
.catch(err => console.log(err));
};
addItemToState = item => {
this.setState(prevState => ({
items: [...prevState.items, item]
}));
};
updateState = item => {
const itemIndex = this.state.items.findIndex(data => data.id_azienda === item.id);
const newArray = [
// destructure all items from beginning to the indexed item
...this.state.items.slice(0, itemIndex),
// add the updated item to the array
item,
// add the rest of the items to the array from the index after the replaced item
...this.state.items.slice(itemIndex + 1)
];
this.setState({ items: newArray });
};
deleteItemFromState = id => {
const updatedItems = this.state.items.filter(item => item.id_azienda !== id);
this.setState({ items: updatedItems });
// console.log(id)
};
componentDidMount() {
this.getList();
}
render() {
return (
<Container className="App">
<Row>
<Col>
<h1 style={{ margin: "20px 0" }}>CRUD Database</h1>
</Col>
</Row>
<Row>
<Col>
<DataTable
items={this.state.items}
updateState={this.updateState}
deleteItemFromState={this.deleteItemFromState}
/>
</Col>
</Row>
<Row>
<Col>
<CSVLink
filename={"db.csv"}
color="primary"
style={{ float: "left", marginRight: "10px" }}
className="btn btn-primary"
data={this.state.items}
>
Download CSV
</CSVLink>
<ModalForm
buttonLabel="Aggiungi"
addItemToState={this.addItemToState}
/>
</Col>
</Row>
</Container>
);
}
}
export default List;
DataTable.js :
import React, { Component } from 'react'
import { Table, Button } from 'reactstrap';
import ModalForm from '../Modals/Modal'
class DataTable extends Component {
deleteItem = id_azienda => {
let confirmDelete = window.confirm('Vuoi Eliminarlo Definitivamente?')
if(confirmDelete){
fetch('http://localhost:5000/api/azienda', {
method: 'delete',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id_azienda
})
})
.then(response => response.json())
.then(item => {
this.props.deleteItemFromState(id_azienda)
console.log(item)
})
.catch(err => console.log(err))
}
console.log(id_azienda)
}
render() {
const items = this.props.items.map(item => {
return (
<tr key={item.id_azienda}>
<th scope="row">{item.id_azienda}</th>
<td>{item.nome_azienda}</td>
<td>{item.tipo}</td>
<td>
<div style={{width:"110px"}}>
<ModalForm buttonLabel="Modifica" item={item} updateState={this.props.updateState}/>
{' '}
<Button color="danger" onClick={() => this.deleteItem(item.id_azienda)}>Elimina</Button>
</div>
</td>
</tr>
)
})
return (
<Table responsive hover>
<thead>
<tr>
<th>ID</th>
<th>Nome Azienda</th>
<th>Tipo Azienda</th>
</tr>
</thead>
<tbody>
{items}
</tbody>
</Table>
)
}
}
export default DataTable;
Modal.js :
import React, { Component } from 'react'
import { Button, Modal, ModalHeader, ModalBody } from 'reactstrap'
import AddEditForm from '../Forms/AddEditForm'
class ModalForm extends Component {
constructor(props) {
super(props)
this.state = {
modal: false
}
}
toggle = () => {
this.setState(prevState => ({
modal: !prevState.modal
}))
}
render() {
const closeBtn = <button className="close" onClick={this.toggle}>×</button>
const label = this.props.buttonLabel
let button = ''
let title = ''
if(label === 'Modifica'){
button = <Button
color="warning"
onClick={this.toggle}
style={{float: "left", marginRight:"10px"}}>{label}
</Button>
title = 'Edit Item'
} else {
button = <Button
color="success"
onClick={this.toggle}
style={{float: "left", marginRight:"10px"}}>{label}
</Button>
title = 'Add New Item'
}
return (
<div>
{button}
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle} close={closeBtn}>{title}</ModalHeader>
<ModalBody>
<AddEditForm
addItemToState={this.props.addItemToState}
updateState={this.props.updateState}
toggle={this.toggle}
item={this.props.item} />
</ModalBody>
</Modal>
</div>
)
}
}
export default ModalForm;
and my AddEditForm.js :
import React,{Component} from 'react';
import { Button, Form, FormGroup, Label, Input,ModalFooter } from 'reactstrap';
class AddEditForm extends Component {
state = {
id_azienda: 0,
nome_azienda: '',
tipo: ''
}
onChange = e => {
this.setState({[e.target.name]: e.target.value})
}
submitFormAdd = e => {
e.preventDefault()
fetch('http://localhost:5000/api/azienda', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
nome_azienda: this.state.nome_azienda,
tipo: this.state.tipo
})
})
.then(response => response.json())
.then(item => {
if(Array.isArray(item)) {
this.props.addItemToState(item[0])
this.props.toggle()
} else {
console.log('failure Add data')
}
})
.catch(err => console.log(err))
}
submitFormEdit = e => {
e.preventDefault()
fetch('http://localhost:5000/api/azienda', {
method: 'put',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id_azienda: this.state.id_azienda,
nome_azienda: this.state.nome_azienda,
tipo: this.state.tipo
})
})
.then(response => response.json())
.then(item => {
if(Array.isArray(item)) {
// console.log(item[0])
this.props.updateState(item[0])
this.props.toggle()
} else {
console.log('failure edit data')
}
})
.catch(err => console.log(err))
}
componentDidMount(){
// if item exists, populate the state with proper data
if(this.props.item){
const { id_azienda, nome_azienda, tipo } = this.props.item
this.setState({ id_azienda, nome_azienda, tipo })
}
}
render() {
return (
<Form onSubmit={this.props.item ? this.submitFormEdit : this.submitFormAdd}>
<FormGroup>
<Label for="nome_azienda">Nome Azienda</Label>
<Input type="text" name="nome_azienda" id="nome_azienda" onChange={this.onChange} value={this.state.nome_azienda === null ? '' : this.state.nome_azienda} />
</FormGroup>
<FormGroup>
<Label for="tipo">Tipo Azienda</Label>
<Input type="text" name="tipo" id="tipo" onChange={this.onChange} value={this.state.tipo === null ? '' : this.state.tipo} />
</FormGroup>
<ModalFooter>
<Button>Submit</Button>
</ModalFooter>
</Form>
);
}
}
export default AddEditForm
Your help is much appreciated
I solved this by adding fade={false} in the modal tag, it worked to have the modal displayed.