CODEWITHSUNDEEP
javascriptreactjsonclickecmascript-6arrow-functions
Jackson Holiday Wheeler
Jackson Holiday Wheeler

Reputation: 771

How to get React onClick to work? (Doesn't work even with arrow function)

Even after following advice found in other questions here on SO, I still can't seem to get the onClick function this.changeContent to work properly:

import React from 'react';
import Maxim from './Maxim';
import Challenge from './Challenge';
import Prompt from './Prompt';

class ContentContainer extends React.Component {
    constructor() {
        super();
        this.changeContent = this.changeContent.bind(this);
        this.state = {
            content: "maxim"
        }
    }

    changeContent(event) {
        console.log(this);
        if (this.state.content == "maxim") {
            this.setState({ content: "challenge" })
        } else {
            this.setState({ content: "maxim" })
        }
    }

    render() {
        let renderedContent = null;

        if (this.state.content == "challenge") {
            renderedContent = <Challenge content="The trick to presence is to listen to the space between the sounds." />;
        } else {
            renderedContent = <Maxim quote="Silence can be heard in every sound. All you need is to listen." />;
        }
            return (
                <div className="content-container">
                    {renderedContent}
                    <Prompt onClick={this.changeContent}/>
                </div>
            );
    }
}

export default ContentContainer;

I've tried using bind, arrow functions (as here), plain function reference...pretty much all the variants I've seen here on SO and elsewhere. I originally had just this.changeContent(), and the function was being called on page load. I've at least got that fixed, but the function still doesn't get called at all - neither this.state.content gets changed, nor does the console log this.

Thank you.

Upvotes: 0

Views: 952

Answers (2)

Mayank Shukla
Mayank Shukla

Reputation: 104379

Check this working example, write it in a similar way it will work : 

class ContentContainer extends React.Component {
    constructor() {
        super();
        this.changeContent = this.changeContent.bind(this);
        this.state = {
            content: "maxim"
        }
    }

    changeContent(event) {
        let content = this.state.content;
        this.setState({ content: content == "challenge" ? "maxim" :  "challenge"})
    }

    render() {
        let renderedContent = null;

        if (this.state.content == "challenge") {
            renderedContent = <Challenge content="The trick to presence is to listen to the space between the sounds." />;
        } else {
            renderedContent = <Maxim quote="Silence can be heard in every sound. All you need is to listen." />;
        }
        return (
             <div className="content-container">
                 {renderedContent}
                 <Prompt onClick={this.changeContent}/>
             </div>
        );
    }
}

class Challenge extends React.Component{
   render(){
     return(
        <div>Inside Challenge<br/>{this.props.content}</div>
     )
   }
}

class Maxim extends React.Component{
   render(){
     return(
        <div>Inside Maxim<br/>{this.props.quote}</div>
     )
   }
}

class Prompt extends React.Component{
   render(){
     return(
        <div style={{paddingTop: '100px'}}>
           Inside Prompt<br/>
           <span onClick={()=>this.props.onClick()}>*Click Me to change the Component</span>
        </div>
     )
   }
}

ReactDOM.render(<ContentContainer/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Upvotes: 2

darkdefender
darkdefender

Reputation: 151

<Prompt onClick={this.changeContent.bind(this)}/> Try this if you haven't already

Upvotes: -1

Related Questions