button Onclick call the function with React State

Question

I am new to react,

I am trying to pass the values on the button onclick from one component to another.

Here is my following code:

contact Component:

import React,{useState} from 'react';

import Section from '../../../HOC/Section';
import apicall from '../../UI/JS/allapicall.js';
const Contact = () => {
  const [name, setName] = useState(0);
 console.log("name");
  return (
    <Section id='contact'>
      <div className='container pt-2 pb-5'>
        <div className='section-header pt-5 pb-5 text-center'>
          <h3 className='section-title'>
            <span>Get in touch with </span>Us
          </h3>
          <h6 className='section-subtitle mr-auto ml-auto'>
           We are here with you 
          </h6>
        </div>
        <div className='section-content'>
          <div className='row'>
            <div className='col-md-9 col-lg-7 mr-auto ml-auto'>
              {/* <form> */}
                <div className='form-group'>
                  <input
                    type='text'
                    className='form-control rounded-0'
                    aria-describedby='emailHelp'
                    placeholder='Enter Name...'
                    onChange={e=>setName(e.target.value)}
                  />
                </div>
                <div className='form-group'>
                  <input
                    type='email'
                    className='form-control rounded-0'
                    aria-describedby='emailHelp'
                    placeholder='Enter email...'
                   
                  />
                </div>
                <div className='form-group'>
                  <textarea
                    className='form-control rounded-0'
                    rows='5'
                    placeholder='Enter Message...'
                  />
                </div>
                <div className='form-group text-center'>
                  <button className='btn btn-block btn-primary rounded-0 mr-auto ml-auto' onClick={apicall({name})}>
                    Send
                  </button>
                </div>
              {/* </form> */}
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
};

export default Contact;

apicall.js:

export default function messagesubmit(test)
{
console.log(test);
const axios = require('axios');
// Optionally the request above could also be done as
axios.get('https://www.zohoapis.com/crm/v2/functions/ticket_create/actions/execute?auth_type=apikey', {
    params: {
      zapikey: "1003.9145fb5d691b5f95a194c17e56300ed3.1cc7246813d8d6842c47f543a4f50b8f"
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });
}

Currently: For each state changes(when I change the "Value" of the text field) the onClick button function is calling on react, and the console.log(test); is printing for every change in name, I don't know where I am doing wrong I need to trigger it on only onclick event.

Here is what I wanted:

For each field value, I need to store the values in states.
On button Click I need to pass the stored values in the state to message submit function within an argument,

Thanks in advance

Thanks for the code and explaining what you want to do. Will you edit your question to also include what your code currently does as well? Also, do you have React Dev Tools installed and do you know how to use the development tools in your browser? These are critical for developing. — Code-Apprentice
– Code-Apprentice, Commented Oct 11, 2021 at 20:41

helrabelo · Accepted Answer · 2021-10-11 21:29:23Z

5

<button className='btn btn-block btn-primary rounded-0 mr-auto ml-auto' onClick={apicall({name})}>
    Send
</button>

Change this to:

<button className='btn btn-block btn-primary rounded-0 mr-auto ml-auto' onClick={() => apicall({name})}>
    Send
</button>

answered Oct 11, 2021 at 21:29

helrabelo

5514 silver badges8 bronze badges

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

Comments

Thomas Clark · Accepted Answer · 2021-10-11 21:28:11Z

2

Your button's onClick needs to be () => apicall({name}) instead of just apicall({name}). When you set the onClick to be apicall({name}) then what happens is apicall({name}) gets instantly called and the onClick is set to the result of that call.

answered Oct 11, 2021 at 21:28

Thomas Clark

312 bronze badges

Collectives™ on Stack Overflow

button Onclick call the function with React State

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related