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

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})