React button onClick properly binded, yet not working

Question

Button in react component is not providing the function in onClick when rendering DOM. Inspecting the element shows the button element's property has f noop()

Where did my function go?

I am making a one-page React webpage that uses react-router, react-bootstrap, react-transition-group, CSSTransition and TransitionGroup. For one of my pages, I try to include Facebook's social plugins, and I want to create a button that changes the state in order to show the plugins.

I tried rendering the button without the facebook SDK and JSX, but it didn't change anything. Below, this.plugin is defined, but I removed it for this code snippet below since it is Facebook's plugin JSX.

class WorkShop extends Component{

state={
    displayPlugin: false
}
displayContent = () => {
    this.setState(prevState=>({
        displayPlugin: !prevState.displayPlugin
    }))
} 
render(){
    return(
        <div className="component-pages">
            <div className="home-div">

                <Container>
                    <Row>
                        <Col md={12}>
                            <div>{this.state.displayPlugin ? this.plugin : null}</div>
                            <button type="button" onClick={this.displayContent}>{this.state.displayPlugin ? "Close Events": "Show Events"}</button>
                        </Col>
                    </Row>
                </Container>

The wrapper App component:

const App = ()=>{
    return(


            <Router>
                <Route render={({location})=>(
                    <div className="global-div">

                        <MainNav location={location}/>
                        <TransitionGroup>
                            <CSSTransition
                            key={location.key}
                            timeout={900}
                            classNames="fade"
                            >
                                <Switch location={location}>
                                    <Route exact path="/" component={Home}/>
                                    <Route exact path="/workshops" component={WorkShop}/>
                                    <Route exact path="/products" component={Products}/>
                                    <Route exact path="/about" component={About}/>
                                </Switch>
                            </CSSTransition>
                        </TransitionGroup>
                    </div>
                )}/>
            </Router>
    )
}

export default App```

I don't see anything wrong here. Your env is using transform-class-properties or stage-2? This is required for using class properties (like the `displayContent` is). Can you try to isolate the issue on a codesandbox? — keul, Mar 24 '19 at 08:41
@EduardoUeda the fact that you don't see the handler on the DOM node is OK in React (even handler are bubbled to the document object IIRC)... Maybe there's another JavaScript that is binding a `noop` on the button aborting your React stuff? — keul, Mar 24 '19 at 08:43
@keul I'm using what comes with npx create-react-app. Whether or not it's a class property doesn't seem to be the issue since I also tried to use .bind(this). Also, I'm using the package that comes with ```npx create-react-app``` . I'll see if I can isolate the issue. Thanks — Ariki, Mar 24 '19 at 08:46
@keul I feel like the issue lies in having my components nested in CSSTransitions? I'm not sure how I should debug this though. — Ariki, Mar 24 '19 at 08:48
@EduardoUeda never had such issues with CSSTransition, but I'm not a super expert. Try to isolate :) — keul, Mar 24 '19 at 08:50
@keul I never used CodeSandbox, but I think this should do it? https://codesandbox.io/s/9ylqjrqz2r?fontsize=14 — Ariki, Mar 24 '19 at 09:15
@keul I figured it out. I believe the problem had to do with the wrapping divs with classNames which I used in other components as well. I'm not sure why it would override the onClick property, but removing the classNames fixed it. — Ariki, Mar 24 '19 at 09:25

score 0 · Answer 1 · answered Mar 24 '19 at 14:19

0

The problem was in my two divs with classNames that I used in other Components. Not too sure why that would disable my onClick handler, but it did fix after I removed those divs.

<div className="component-pages">
   <div className="home-div">

answered Mar 24 '19 at 14:19

Ariki

43
1
7

score -1 · Answer 2 · answered Mar 24 '19 at 08:36

Need to bind this with event. See below working code.

class WorkShop extends Component {

  state = {
    displayPlugin: false
  }

  displayContent = () => {
    this.setState(prevState => ({
      displayPlugin: !prevState.displayPlugin
    }))
  }

  render() {
    return (
      <div className="component-pages">
        <div className="home-div">

          <div>{this.state.displayPlugin ? this.plugin : null}</div>
          <button type="button"
            onClick={this.displayContent.bind(this)}>
            {this.state.displayPlugin ? "Close Events" : "Show Events"}
          </button>
        </div></div>)
  }
}

The `displayContent` function is a class property so the bind is not required here — keul, Mar 24 '19 at 08:38
Thanks for input, but I'm using an arrow function to avoid having to bind "this" — Ariki, Mar 24 '19 at 08:41

React button onClick properly binded, yet not working

2 Answers2