Reputation: 1605

TypeError: this.state.edit is not a function

I want to create update operation on ReactJS first I set edit button as

export default class Viewcustomer extends React.Component{

    constructor(props) {
        super(props)
        this.state = {
            customers:[]
        }

    }


    componentDidMount() {   /* lifecycle method*/
        axios.get(`http://localhost:5001/customers/customerView`)
          .then(res => {
            const customers = res.data;
            this.setState({customers});
          })
      }

      onChange = (e) => {
        this.setState(
        {[e.target.name]: e.target.value}
    )
    }

    edit=personId=>{
      console.log(personId);
  }


    render(){

        return(
            <div>
                            <br/><br/>


                    <div className='container' style={container}>



                                        <h1 style={h1}>Customer Details</h1>
                                        <div className='col-md-12' style={colmd12}>
                                            <br/><br/>

                                                <div className="tbl-header" style={tblheader}>
                                                    <table className="table" style ={table}  >
                                                    <thead className='thead'  >
                                                        <tr className='tr' >

                                                                <th >Id</th>
                                                                <th>name</th>
                                                                <th>NIC</th>
                                                                <th>type</th>
                                                                <th>Delete</th>
                                                                <th>Update</th>

                                                        </tr>
                                                    </thead>

                                                    </table>

                                                </div>
                                                <div className="tbl-content" style={tblcontent}>
                                                    <table className="table" style ={table} >
                                                    <tbody>
                                                         { this.state.customers.map(person =>
                                                                    <tr className='td' style={td}>
                                                                    <td>{person.Id}</td>
                                                                    <td>{person.name}</td>
                                                                    <td>{person.NIC}</td>
                                                                    <td>{person.type}</td>
                                                                    <td><Link to="update"><i class="fa fa-trash-o"  style={iconstyle}></i></Link></td>

                                                                    <td><Link to="update"><i class="fa fa-file" style={iconstyle}  onClick={()=>this.state.edit(person.Id)}></i></Link></td>





                                                                    </tr>)}   
                                                        </tbody>
                                                        </table>
                                                </div>
                                            </div>



                     </div>
            </div>



        )

     }


 }

the update icon routes to Updatecustomer.jsx file. then I set the edit fuction on Update.jsx file

import React from "react";


export default class Updatecustomer extends  React.Component{

    constructor(props){
        super(props)

        this.state={

            update:[]
        }
    }


    onChange = (e) => {
        this.setState(
        {[e.target.name]: e.target.value}
    )
        }

        edit=personId=>{
            console.log(personId);
        }

    render(){
        return(
            <div>

            </div>
        )
    }
}

then my browser gives the following error: (TypeError: this.state.edit is not a function)