how to use onClick when it renders

Question

I am fairly new to react and was wondering how I would change the code below in order for me to use onClick function for each of the section tag.

render(){
        return(
            <div className='App'>
                < Header /> 

                <div className="secHeader"><h2>General Education Core</h2></div>
                <br/>

                {/* Displays the 6 different gen eds cateogry that uic offers and calls the displaygenEdCourse component and sends props to know which item was clicked */}
                <div className="box alt container">
                    {/* link for Analyzing the Natural World */}
                    <section className="feature left">
                        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'ANW' }}} className="image icon solid fa-seedling"><img src={pic01} alt="pic01" /></Link>
                        <div className="content">
                            <h3>Analyzing the Natural World</h3>
                        </div>
                    </section>
                    {/* link for Understanding the Individual and Society */}
                    <section className="feature right">
                        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'UIS' }}} className="image icon solid fa-users"><img src={pic01} alt="pic01" /></Link>
                        <div className="content">
                            <h3>Understanding the Individual and Society</h3>
                        </div>
                    </section>
                    {/* link for Understanding the Past */}
                    <section className="feature left">
                        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'UP' }}} className="image icon solid fa-history"><img src={pic01} alt="pic01" /></Link>
                        <div className="content">
                            <h3>Understanding the Past</h3>
                        </div>
                    </section>
                    {/* link for Understanding the Creative Arts */}
                    <section className="feature right">
                        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'UCA' }}} className="image icon solid fa-palette"><img src={pic01} alt="pic01" /></Link>
                        <div className="content">
                            <h3>Understanding the Creative Arts</h3>
                        </div>
                    </section>
                    {/* link for Exploring World Cultures */}
                    <section className="feature left">
                        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'EWC' }}} className="image icon solid fa-globe"><img src={pic01} alt="pic01" /></Link>
                        <div className="content">
                            <h3>Exploring World Cultures</h3>
                        </div>
                    </section>
                    {/* link for Understanding U.S. Society */}
                    <section className="feature right">
                        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'UUS' }}} className="image icon solid fa-flag-usa"><img src={pic01} alt="pic01" /></Link>
                        <div className="content">
                            <h3>Understanding U.S. Society</h3>
                        </div>
                    </section>
                </div>

                < Footer />

            </div>
        )
    }

Each section tag is a block/image that I want to be able to click and when I click it then it should call onClick function so I get notify which section is clicked. I tried putting onClick inside the section tag like <section className="feature left" onClick={console.log('testing')}>. Also tried playing around and placing the onClick in other places in each section tag but it didn't seem to work. Whenever the page renders, the onClick gets called and then when I click that image it doesn't call onClick. Not sure where I may be going wrong.

Drew Reese · Accepted Answer · 2020-07-30 00:37:14Z

3

onClick callbacks take a function, so something like onClick={() => console.log('testing')}. As-is you are invoking what you want executed later rather immediately.

<section
  className="feature left"
  onClick={() => console.log('testing')}
>
  ...

It can also be a function

 <section
  className="feature left"
  onClick={function() {
    console.log('testing');
  }}
>
  ...

Or either and defined externally, notice here you directly pass the function, no parenthesis.

 const clickHandler = () => console.log('testing');

 <section
  className="feature left"
  onClick={clickHandler}
>
  ...

answered Jul 30, 2020 at 0:37

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

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

Comments

Talmacel Marian Silviu · Accepted Answer · 2020-07-30 00:36:57Z

2

You have to write it as an arrow function, so as not to be called immediately:

<section className="feature left" onClick={() => console.log('testing')}>

answered Jul 30, 2020 at 0:36

Talmacel Marian Silviu

1,7762 gold badges10 silver badges15 bronze badges

Comments

ray · Accepted Answer · 2020-07-30 00:38:09Z

2

You were close, but onClick takes a function. Try onClick={() => console.log('testing')} instead.

The subtle but important difference here is that what you have is the equivalent of:

// handler is undefined because console.log doesn’t return anything
const handler = console.log(‘testing’);

// handler isn’t a function, so this doesn’t work 
<section onClick={handler}> ... </section>

answered Jul 30, 2020 at 0:38

ray

27.3k5 gold badges31 silver badges30 bronze badges

Comments

Gabriel · Accepted Answer · 2020-07-30 00:38:58Z

1

That's because when you write "console.log('testing')" you are calling the function on component render. In order to work with your click, you need to create a function that calls console.log. So the correct syntax is:

<section className="feature left" onClick={() => console.log('testing')}>

answered Jul 30, 2020 at 0:38

Gabriel

112 bronze badges

Comments

kJs0 · Accepted Answer · 2020-07-30 00:39:18Z

You are invoking your onClick incorrectly. You need to pass it an anonymous function if you want to call functions directly inside of onClick. For example see the below ES6 syntax for your example:

class SomeComponent extends React.Component {
  constructor stuff...

  render() {
    return() {
      <section className="feature left" onClick={() => console.log('testing')}>
        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'EWC' }}} className="image icon solid fa-globe"><img src={pic01} alt="pic01" /></Link>
        <div className="content">
          <h3>Exploring World Cultures</h3>
        </div>
      </section>
    }
  }
}

Alternatively, you can also create an arrow function outside of your render methods and use that directly instead too:

class SomeComponent extends React {
  constructor stuff...

  onSectionClick = () => {
    console.log('testing');
  };

  render() {
    return() {
      <section className="feature left" onClick={onSectionClick}>
        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'EWC' }}} className="image icon solid fa-globe"><img src={pic01} alt="pic01" /></Link>
        <div className="content">
          <h3>Exploring World Cultures</h3>
        </div>
      </section>
    }
  }
}

Collectives™ on Stack Overflow

how to use onClick when it renders

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related