I am new to react and am trying to put edit button next to the rows for edit function into the DB However I am getting this error message.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Department`.
▶ 23 stack frames were collapsed.
(anonymous function)
D:/React/employee-app/src/components/Department.js:22
19 | fetch('https://localhost:44363/api/department')
20 | .then(response=>response.json())
21 | .then(data=>{
> 22 | this.setState({deps:data});
| ^ 23 | }
24 | );
25 | }
View compiled
Here is the code:
Department.js
export class Department extends Component{
constructor(props){
super(props);
this.state={deps:[],addModalShow:false,editModalShow:false}
}
componentDidMount(){
this.refreshList();
}
refreshList(){
fetch('https://localhost:44363/api/department')
.then(response=>response.json())
.then(data=>{
this.setState({deps:data});
}
);
}
componentDidUpdate(){
this.refreshList();
}
render(){
const {deps,depid,depname} = this.state;
let addModalClose = () => this.setState({addModalShow:false});
let editModalClose = () => this.setState({editModalShow:false});
return(
<div>
<Table className="mt-4" striped bordered hover size="sm">
<thead>
<tr>
<th>DepartmentId</th>
<th>DepartmentName</th>
<th>Option</th>
</tr>
</thead>
<tbody>
{deps.map(dep =>
<tr key = {dep.DepartmentID}>
<td>{dep.DepartmentID}</td>
<td>{dep.DepartmentName}</td>
<td>
<ButtonToolbar>
<Button
className="mr-2"
variant="info"
onClick={()=>
this.setState({editModalShow:true,depid:dep.DepartmentID,depname:dep.DepartmentName})
}>
Edit
</Button>
<EditDepModal
show={this.state.editModalShow}
onHide={editModalClose}
depid = {depid}
depname={depname}
/>
</ButtonToolbar>
</td>
</tr>
)}
</tbody>
</Table>
<ButtonToolbar>
<Button
variant='primary'
onClick={()=>this.setState({addModalShow:true})}>
Add Department
</Button>
<AddDepModal
show={this.state.addModalShow}
onHide={addModalClose}/>
</ButtonToolbar>
</div>
)
}
}
export default Department;
This is the editmodaldep.js
export class EditDepModal extends Component{
constructor(props){
super(props);
this.state = {sanackbaropen: false, snackbarmsg:''};
this.handleSubmit = this.handleSubmit.bind(this);
}
snackbarClose = (event) =>{
this.setState({snackbaropen:false});
};
handleSubmit(event){
event.preventDefault();
fetch('https://localhost:44363/api/Department',{
method:'PUT',
headers:{
'Accept':'application/json',
'Content-Type':'application/json'
},
body:JSON.stringify({
DepartmentID:event.target.DepartmentID.value,
DepartmentName: event.target.DepartmentName.value
})
})
.then(res=> res.json())
.then((result)=>
{
//alert(result);
this.setState({snackbaropen:true,snackbarmsg:result})
},
(error)=>{
// alert('Failed')
this.setState({snackbaropen:true,snackbarmsg:'failed'})
})
}
render(){
return(
<div className="container">
<Snackbar
anchorOrigin={{vertical:"center",horizontal:'center'}}
open ={this.state.snackbaropen}
autoHideDuration = {3000}
onClose={this.snackbarClose}
message = {<span id= "message-id">{this.state.snackbarmsg}</span>}
action={[
<IconButton
key="close"
aria-label="Close"
color="inherit"
onClick={this.snackbarClose}
>
X
</IconButton>
]} />
<Modal
{...this.props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Edit Department
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Row>
<Col sm={6}>
<Form onSubmit={this.handleSubmit}>
<Form.Group controlId="DepartmentID">
<Form.Label>DepartmentID</Form.Label>
<Form.Control
type = "text"
name="DepartmentID"
required
disabled
defaultValue = {this.props.depid}
placeholder="DepartmentID"
/>
</Form.Group>
<Form.Group controlId="DepartmentName">
<Form.Label>Department Name</Form.Label>
<Form.Control
type = "text"
name="DepartmentName"
required
placeholder="Department Name"
defaultValue = {this.props.depname}
/>
</Form.Group>
<Form.Group>
<Button variant="primary" type ="submit">
Update Department
</Button>
</Form.Group>
</Form>
</Col>
</Row>
</Modal.Body>
<Modal.Footer>
<Button variant= "danger" onClick={this.props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
export default EditDepModal;
I do not really understand this error. I have given export default to all the components in the solution.
Could someone please help in this?
Remove keyword export from first line of your both components. Use just default export in the bottom of the file.
class Department extends Component{
....
render() {
}
}
export default Department;
And then for imports use this type of import EditDepModal from './EditDepModal';
You can read more about the difference between default and named imports in JS.