I am a plete newbie in React. I created a ponent which is a button. This ponent renders out an image, and my goal is to use this image as a favorite button. For now all I wanna do is log something in my console when I click the image.

I used a handleClick event but I think that isn't that simple here's my ponent:

/**
 * Renders the Favorite button
 */
export default class FavoriteButton extends React.Component
{
    /**
     * Favorite button constructor
     *
     * @param props
     */
    constructor(props)
    {
        super(props);

        this.state = {
            header: "some header test data",
        }
    }

    /**
     * Handle a click event on a Favorite button
     */
    handleClick()
    {
        console.log("hello there");
    }

    /**
     * Renders the Favorite button
     */
    render()
    {
        return(
            <div className="favorite_button">
                <img src="url" className="" alt="" />
                <div>{this.state.header}</div>
            </div>
        );
    }
}

If anyone can help me out that would be realy awesome!

My ultimate goal is to fire a database action to store the element that you've favorited but for now I just wanna log something :)

Many thanks in advance!

I am a plete newbie in React. I created a ponent which is a button. This ponent renders out an image, and my goal is to use this image as a favorite button. For now all I wanna do is log something in my console when I click the image.

I used a handleClick event but I think that isn't that simple here's my ponent:

/**
 * Renders the Favorite button
 */
export default class FavoriteButton extends React.Component
{
    /**
     * Favorite button constructor
     *
     * @param props
     */
    constructor(props)
    {
        super(props);

        this.state = {
            header: "some header test data",
        }
    }

    /**
     * Handle a click event on a Favorite button
     */
    handleClick()
    {
        console.log("hello there");
    }

    /**
     * Renders the Favorite button
     */
    render()
    {
        return(
            <div className="favorite_button">
                <img src="url" className="" alt="" />
                <div>{this.state.header}</div>
            </div>
        );
    }
}

If anyone can help me out that would be realy awesome!

My ultimate goal is to fire a database action to store the element that you've favorited but for now I just wanna log something :)

Many thanks in advance!

• javascript
• reactjs

Share Improve this question Follow asked Sep 9, 2016 at 8:09 Frank LucasFrank Lucas 63144 gold badges1212 silver badges3030 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You have added the method handleClick to the ponent but you have to assign it to an event handler, in this case, onClick.

render()
{
    return(
        <div className="favorite_button">
            <img onClick={this.handleClick} src="url" className="" alt="" />
            <div>{this.state.header}</div>
        </div>
    );
}

If you are going to use this inside handleClick, you have to bind the method to the instance as well.

constructor(props)
{
    super(props);
    this.state = {
        header: "some header test data",
    }
    this.handleClick = this.handleClick.bind(this);
}

 render()
    {
        return(
            <div className="favorite_button">
                <img onClick={this.handleClick} src="url" className="" alt="" />
                <div>{this.state.header}</div>
            </div>
        );
    }

Or If you want use from this button in several ponents with different functions you must do this :

 render()
    {
        return(
            <div className="favorite_button">
                <img onClick={this.props.handleClick} src="url" className="" alt="" />
                <div>{this.state.header}</div>
            </div>
        );
    }

and in parent ponent :

    class Parent extends Component {

            test (){
                 console.log("hiiii its parent ponent");
               }

            render(){
                return(
                   <FavoriteButton handleClick={()=>{this.test()}}/>
                 );
            }

}

try this :)

        <div className="favorite_button" onClick={handleClick.bind(this)>
            <img src="url" className="" alt="" />
            <div>{this.state.header}</div>
        </div>