function remains undefined after binding too in Reactjs

Question

I tried out this code. Everything seems fine to me but compiler say's onDismiss is undefined? Please help me out on this one....

import React, { Component } from 'react';

const list=[{title:'React',id:0},{title:'Redux',id:1}];

class App extends Component {

    constructor(props) {
    super(props);
    this.state={list,};
    this.onDismiss=this.onDismiss.bind(this); }

    onDismiss(id){

    const isnotid=item=>item.id!==id;
    const uplist=this.state.list.filter(isnotid);
    this.setState({list : uplist});
  }
    render() {

    return( <div className="App">
         {this.state.list.map(item=>
         <div key={item.id}>
         <span>
          {item.title}
         </span>
         <button onClick={()=>onDismiss(item.id)} type="button">
          Dismiss
         </button>
         </div>)}</div>);
    }
}
export default App;

It is a simple app that displays a list. A dismiss button is used to remove any unneeded content. Basically, I am just practicing Reactjs but don't have the clue about why my Ondismiss( The function to change content by updating component state) function is Undefined as described by compiler. Fixed typo's and little mistakes but it onDismiss function still remains undefined!

call it as this.onDismiss()

Manoj
– Manoj

2018-07-12 20:16:44 +00:00
Commented Jul 12, 2018 at 20:16 — Manoj
– Manoj, Commented Jul 12, 2018 at 20:16
It says onDimiss in the example code.

undefined
– undefined

2018-07-12 20:24:44 +00:00
Commented Jul 12, 2018 at 20:24 — undefined
– undefined, Commented Jul 12, 2018 at 20:24
dude corrected it but still it stays undefined!

Bilal Kazmi
– Bilal Kazmi

2018-07-12 20:29:53 +00:00
Commented Jul 12, 2018 at 20:29 — Bilal Kazmi
– Bilal Kazmi, Commented Jul 12, 2018 at 20:29

Manoj · Accepted Answer · 2018-07-12 20:17:35Z

1

replace

<button onClick={()=>onDismiss(item.id)} type="button">

with

<button onClick={()=>this.onDismiss(item.id)} type="button">

answered Jul 12, 2018 at 20:17

Manoj

1,2058 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bilal Kazmi Over a year ago

thanks Yadav, but now it say's "TypeError: Cannot read property 'bind' of undefined"

Tholle Over a year ago

@BilalKazmi You have written onDimiss in your question.

Manoj Over a year ago

your function definition has a typo error. check onDismiss method spelling. upvote to @Tholle

Tholle Over a year ago

@BilalKazmi With Manoj's fix, and with the typo fixed, it will work.

Bilal Kazmi Over a year ago

it still says 'undefined'?

Collectives™ on Stack Overflow

function remains undefined after binding too in Reactjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related