title: OnClick Javascript function is not working in React
body: <p>I have a login page and below shown the jsx of my login page .Login submit button is inside here.on clicking this login button nothin is triggered or no change reflected</p>
  
  <pre><code> import {
    Button,
    Card,
    Form,
    Input,
    InputGroupAddon,
    InputGroupText,
    InputGroup,
    Container,
    Row,
    Col,
  } from 'reactstrap';
   const SectionLogin = ({ onLoginClick, setEmail, setPassword }) =&gt; {
  
  
    return (
      &lt;&gt;
        &lt;div
          className='wrapper'
          style={{
            backgroundImage: 'url(' + require('app/assets/img/j.jpg') + ')',
          }}
        &gt;
          &lt;Container&gt;
            &lt;Row&gt;
              &lt;Col
                className='mx-auto'
                lg='4'
                md='6'
                style={{ paddingTop: '60px' }}
              &gt;
                &lt;Card className='card-register' style={{ padding: '15px' }}&gt;
                  &lt;h3 className='title mx-auto'&gt;Welcome&lt;/h3&gt;
                  &lt;div className='social-line text-center'&gt;
                    &lt;Button
                      className='btn-neutral btn-just-icon mt-0'
                      color='facebook'
                      // onClick={(e) =&gt; e.preventDefault()}
                    &gt;
                      &lt;i
                        className='fab fa-facebook fa-3x'
                        style={{ color: '#3b5998' }}
                      /&gt;
                    &lt;/Button&gt;
                    &lt;Button
                      className='btn-neutral btn-just-icon mt-0 ml-1'
                      color='google'
                      // onClick={(e) =&gt; e.preventDefault()}
                    &gt;
                      &lt;i
                        className='fab fa-google-plus fa-3x'
                        style={{ color: '#db4a39' }}
                      /&gt;
                    &lt;/Button&gt;
                    &lt;Button
                      className='btn-neutral btn-just-icon mt-0 ml-1'
                      color='twitter'
                      // onClick={(e) =&gt; e.preventDefault()}
                    &gt;
                      &lt;i
                        className='fab fa-twitter fa-3x'
                        style={{ color: '#00acee' }}
                      /&gt;
                    &lt;/Button&gt;
                  &lt;/div&gt;
                  &lt;Form className='register-form'&gt;
                    &lt;label&gt;Email&lt;/label&gt;
                    &lt;InputGroup className='form-group-no-border'&gt;
                      &lt;InputGroupAddon addonType='prepend'&gt;
                        &lt;InputGroupText&gt;
                          &lt;i className='nc-icon nc-email-85' /&gt;
                        &lt;/InputGroupText&gt;
                      &lt;/InputGroupAddon&gt;
                      &lt;Input
                        placeholder='Email'
                        type='email'
                        // onChange={(e) =&gt; setEmail(e.target.value)}
                      /&gt;
                    &lt;/InputGroup&gt;
                    &lt;label&gt;Password&lt;/label&gt;
                    &lt;InputGroup className='form-group-no-border'&gt;
                      &lt;InputGroupAddon addonType='prepend'&gt;
                        &lt;InputGroupText&gt;
                          &lt;i className='nc-icon nc-key-25' /&gt;
                        &lt;/InputGroupText&gt;
                      &lt;/InputGroupAddon&gt;
                      &lt;Input
                        placeholder='Password'
                        type='password'
                        // onChange={(e) =&gt; setPassword(e.target.value)}
                      /&gt;
                    &lt;/InputGroup&gt;
                    &lt;Button
                      block
                      className='btn-round'
                      color='warning'
                      type='button'
                       onClick={onLoginClick}
                    &gt;
                      Login
                    &lt;/Button&gt;
                  &lt;/Form&gt;
  
                  &lt;div className='forgot'&gt;
                    &lt;Button
                      className='btn-link'
                      color='secondary'
                      // onClick={(e) =&gt; e.preventDefault()}
                    &gt;
                      Forgot password?
                    &lt;/Button&gt;
                  &lt;/div&gt;
                &lt;/Card&gt;
                &lt;div className='col text-center'&gt;
                  {/* &lt;Button
                      className='btn-round'
                      outline
                      color='neutral'
                      href='/register-page'
                      size='lg'
                      target='_blank'
                    &gt;
                      View Register Page
                    &lt;/Button&gt; */}
                &lt;/div&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Container&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default SectionLogin;
  </code></pre>
  
  <p>button code is inside this SectionLogin Container(inside return where my login page jsx reside)</p>
  
  <pre><code>import React, { useEffect, useCallback, useState } from 'react';
  import { useSelector, useDispatch } from 'react-redux';
  
  import SectionLogin from './LoginPage';
  
  
  const LoginContainer = () =&gt; {
  
  
    const dispatch = useDispatch();
  
    const onLoginClick = (e) =&gt; {
      console.log('hereeee');
      alert('Hello');
    };
  
    return (
      &lt;&gt;
        &lt;div className='content'&gt;
          &lt;SectionLogin
            onLoginClick={onLoginClick}
          /&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  export default LoginContainer;
  </code></pre>
  
  <p>onLoginClick function is not triggering when button is clicked.</p>