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:

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

Thanks in advance

CodePudding user response：

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.

CodePudding user response：

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