React handleChange throwing error "this.setState is not a function" - reactjs

Question

Whenever I trigger readItem() and handleChange() afterwards, browser throws error "this.setState is not a function". HandleChange() works well otherwise. Could someone advise what is causing the error and how to fix it? I also expecting the readtItem() function to update the state, which doesn't happen. Any help will be appreciated.
Thanks
import React from 'react';
import ListItems from '../src/components/ListItems/ListItems.component';
import Button from '../src/components/button/button.component';
import axios from 'axios';
// import axios from 'axios';
// import Home from './components/home/home.component';
import './App.css';
class App extends React.Component {
constructor(props){
super(props);
this.state = {
items:[],
readItem: {
name:'',
email:'',
phone:'',
myId:''
},
currentItem:{
name:'',
email:'',
phone:''
}
}
}
addItem = e => {
e.preventDefault();
const { name,email,phone } = this.state.currentItem;
const myId = Math.random().toString();
const items = [...this.state.items, {name, email, phone, myId: myId}];
this.setState({
items: items,
currentItem:{
name:'',
email:'',
phone:'',
myId:''
}
})
const config = {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials':true
}
};
axios.post('/records', {name , email, phone, myId: myId}, config)
.then(res => {
console.log(res);
console.log(res.data);
})
}
handleChange = event => {
const { name, value } = event.target;
this.setState({
currentItem: {
...this.state.currentItem, [name]: value
}
});
}
deleteItem = myId => {
const filteredItems= this.state.items.filter( item => item.myId!==myId);
this.setState({
items: filteredItems
})
axios.delete('/records/' + myId, {data: {id: myId}})
.then(res => console.log(res))
}
componentDidMount(){
axios.get('/records')
.then(res => {
this.setState({items:res.data});
})
}
readItem = item => {
this.setState = {
readItem: item
}
}
render(){
return (
<div className="App">
<div className='container'>
<div className='form-container'>
<form className='form' onSubmit={this.addItem}>
<input type='text' name='name' placeholder='Name' autoComplete='off' onChange={this.handleChange} value={this.state.currentItem.name} />
<input type='text' name='email' placeholder='Email Address' autoComplete='off' onChange={this.handleChange} value={this.state.currentItem.email} />
<input type='text' name='phone' placeholder='Mobile Number' autoComplete='off' onChange={this.handleChange} value={this.state.currentItem.phone} />
<Button className='submit-button' type='submit' name='Submit' color='white'/>
</form>
</div>
<div className='table-container'>
{
this.state.items.length > 0 ?
(<table className='table'>
<thead className='table-header'>
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Mobile Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<ListItems items={this.state.items} deleteItem={this.deleteItem} readItem={this.readItem}/>
</tbody>
</table> )
:null
}
</div>
</div>
{
this.state.readItem ?
(<div className='popup'>
<p>Name: </p>
<p>Email Address: </p>
<p>Mobile Number: </p>
</div>)
: null
}
</div>
);
}
}
export default App;

Answer 1

you can't update state like this.setState = {readItem: item}
setState is a function and should use like this.setState({items: filteredItems})

Answer 2

try to make all your methods arrow functions like handleChange=()=>{} they do not have this in normal function

Answer 3

As you are using this.setState, it sounds like you are using a Component class. When a callback is called on a child element (such as onChange etc.) The context (this) is set to the child element itself. For the correct "this" context to be preserved, you need to bind the callback functions.
In your class' constructor, add the following to bind your methods:
this.handleChange = this.handleChange.bind(this);
See here for more information on handling events
In the future please upload snippets of the code in question.

Answer 4

Make sure this is bound within your callbacks for ex. handleChange by adding the binding code inside your constructor.
constructor(props) {
super(props);
this.state = {
items:[],
readItem: {
name:'',
email:'',
phone:'',
myId:''
},
currentItem:{
name:'',
email:'',
phone:''
}
}
// Add below line for all callbacks
this.handleChange = this.handleChange.bind(this)
}
You can also use arrow function in the callback if you don't want to use the bind code inside constructor. Here is a class component CodeSandbox for both of the use cases. The example is adapted from official doc.
If you are working on a new codebase or new to React I would highly encourage you to use functional components in place of class components. In my opinion, functional components and useState APIs are much simpler and less verbose than class components. Here is a functional component CodeSandbox for the above example.