'Why am I getting an undefined for classlist that I don't call in React
I have a tutorial React program I am working with that worked fine until I added a couple of buttons. They all give me the same error.
In the addClick, which does nothing at this point, gets the error before the console.log statement I have in the method. The only thing in the addClick is a console.log statement and I get the error before the console.log message is displayed. So the error happens from the click event, I assume.
The react code:
import React, { Component } from 'react';
import { variables } from './Variables';
export class Department extends Component {
constructor(props) {
super(props);
this.state = {
departments: [],
modalTitle: "",
DepartmentName: "",
DepartmentId: 0
}
}
refreshLlist() {
fetch(variables.API_URL + 'department')
.then(response => response.json())
.then(data => {
this.setState({ departments: data });
});
}
componentDidMount() {
this.refreshLlist();
}
changeDepartmentName = (e) => {
this.setState({ DepartmentName: e.target.value });
}
addClick() {
console.log("in addClick");
}
editClick(dep) {
this.setState({
modalTitle: "Add Department",
DepartmentId: dep.DepartmentId,
DepartmentName: dep.DepartmentName
});
}
render() {
const {
departments,
modalTitle,
DepartmentId,
DepartmentName
} = this.state;
return (
<div>
<button type="button" className="btn btn-primary m-2 float-end"
data-bs-toggle="modal" data-bs-target="exampleModal"
onClick={() => this.addClick()}>
Add Department
</button>
<table className="table table-striped">
<thead>
<tr>
<th>
DepartmentId
</th>
<th>
DepartmentName
</th>
<th>
Options
</th>
</tr>
</thead>
<tbody>
{departments.map(dep =>
<tr key={dep.DepartmentId}>
<td>{dep.DepartmentId}</td>
<td>{dep.DepartmentName}</td>
<td>
<button type="button"
className="btn btn-light mr-1"
data-bs-toggle="modal" data-bs-target="exampleModal"
onClick={() => this.addClick()}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
<path fillRule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
</svg>
</button>
<button type="button"
className="btn btn-light mr-1" data-bs-toggle="modal" data-bs-target="exampleModal"
onClick={() => this.editClick(dep)}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-trash-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
</svg>
</button>
</td>
</tr>)
}
</tbody>
</table>
<div className="modal fade" id="exampleModal" tabIndex="-1" aria-hidden="true">
<div className="modal-dialog modal-lg modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">{modalTitle}</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div className="modal-body">
<div className="input-group mb-3">
<span className="input-group-text">DepartmentName</span>
<input type="text" className="form-control" value={DepartmentName}
onChange={this.changeDepartmentName} />
</div>
{DepartmentId === 0 ?
<button type="button" className="btn btn-primary float-start">Create</button> :
null
}
{DepartmentId !== 0 ?
<button type="button" className="btn btn-primary float-start">Update</button> :
null
}
</div>
</div>
</div>
</div>
</div>
)
}
}
Solution 1:[1]
I found the issue. I had added react-bootstrap to try to get the modal to work and after making a few changes for the new modal, it worked.
But then I went back and saw that the author did have the same issue I was having and he had to make a change. He changed the code target in three places. I (and he, originally) had the target as "exampleModal". But you are looking for an ID and the ID is "exampleModal" but to point to the ID, you have to put a "#" first to denote ID. When I added the "#" to all the targets, it worked fine.
Here was where the error was happening in the modal.js file.
Solution 2:[2]
Try to replace your bootstrap html code with Reactstrap JSX's code The error is from your bootstrap HTML code
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Achraf |