CODEWITHSUNDEEP
javascripthtmlreactjs
Shalin Patel
Shalin Patel

Reputation: 179

how to use onClick when it renders

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.

Upvotes: 0

Views: 84

Answers (5)

kJs0
kJs0

Reputation: 138

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>
    }
  }
}

Upvotes: 1

Gabriel
Gabriel

Reputation: 11

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')}>

Upvotes: 1

ray
ray

Reputation: 27285

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>

Upvotes: 2

Drew Reese
Drew Reese

Reputation: 203466

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}
>
  ...

Upvotes: 3

Talmacel Marian Silviu
Talmacel Marian Silviu

Reputation: 1736

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

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

Upvotes: 2

Related Questions