0

I am creating a table with a button to delete a value from an array to call my api to delete the selected value but clicking the button causes error Uncaught TypeError: Cannot read property 'doDelete' of undefined react-dom.production.min.js:52

Here is the constructor


  constructor(props)
  {
    super(props);
   
    this.state = 
    {
      diary:[],
      isLoaded: false,
      diaryid:''
     
    }
    this.doDelete = this.doDelete.bind(this);
  }

Here is some of the code this seems to be where the issues are

  doDelete(diaryID)
  {

    console.log("In Function")
  }


  renderPerson(diary, index) {

  return (
    <tr key={index}>
      <td>{diary.user}</td>
      <td>{diary.note}</td>
      <td>{diary.date}</td>

      <td>
 
        <button onClick={() => { this.doDelete(diary._id) }} className="delete-btn">Delete</button>

      </td>
    </tr>
   )

  }

render() {

var {isLoaded, diary} = this.state;

      if(Userstore.loading)
      {
        return (

           <div className="app">

            <div className='container'>Loading, please wait...</div>

           </div>
        )
      }
      else
      {
        if(Userstore.isLoggedIn)
        {

          return (

           <div className="app">
            <div className='container'>Hello {Userstore.username}
    
          

            <SubmitButton 
              text={'Logout'}
              disabled={false}
              onClick={ () => this.doLogout() }

            />



          <ReactBootStrap.Table striped bordered hover>
            <thead>
              <tr>
                <th>Username</th>
                <th>Note</th>
                <th>Date</th>
                <th>Delete</th>
              </tr>
            </thead>
            <tbody>
             {diary.map(this.renderPerson)}
            </tbody>
          </ReactBootStrap.Table>



            </div>
           </div>
        )
        }
      return (
      <div className="app">
        <div className='container'>

          <LoginForm />

        </div>
      </div>

      );
   }
 }
aneuroo
  • 77
  • 1
  • 8
  • Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – CertainPerformance Oct 16 '20 at 14:53
  • You need to bind the function that you pass to other components. In your case that would be the `renderPerson` and not the `doDelete` – Gabriele Petrioli Oct 16 '20 at 15:53
  • Yeah that works never would of got there on that one thank you soo much Gabriele – aneuroo Oct 17 '20 at 07:23

0 Answers0