CODEWITHSUNDEEP
reactjs
Parviz Pirizade
Parviz Pirizade

Reputation: 195

React js:state change triggers button click

The input_value and quote_value states change on input onCgange event. This state change somehow triggers the send_data function on ADD QUOTE button. I am trying to find the reason behind.

import classes from '../css/AddQuote.module.css';
import { useState } from 'react';
import db from './db.js';
const AddQuotes = () => {
  const [input_value, setValue] = useState(''); //state1
  const [quote_value, set_quote_value] = useState(''); //state2

  let data = {
    Author: input_value,
    Quote: quote_value,
  };

  function changeInptVl(val) {
    setValue(val.target.value);
  }
  function change_qt_val(val) {
    set_quote_value(val.target.value);
  }

  function send_data(data) {
    db.collection('data').add(data);
    then(() => {
      console.log('data send');
    }).catch(() => {
      console.log('eror occured');
    });
  }

  return (
    <div className={classes.input_container}>
      Author
      <input className={classes.author} onChange={changeInptVl}></input>
      Quote
      <textarea
        onChange={change_qt_val}
        style={{ width: '100%', height: '130px', outline: 'none' }}
      >
        {' '}
      </textarea>
      //ADD QUOTE BUTTON{' '}
      <button
        onClick={send_data(data)}
        style={{
          marginTop: '10px',
          borderRadius: '5px',
          background: '#0aa0f2  ',
          width: '120px',
          height: '70px',
          color: 'white',
          borderStyle: 'none',
        }}
      >
        ADD QUOTE
      </button>
    </div>
  );
};

export default AddQuotes;

Upvotes: 1

Views: 847

Answers (1)

Daniel_Kamel
Daniel_Kamel

Reputation: 619

When you're passing a value to the send data function you need to use the ES6 function like this: <button onClick={ () => send_data(data) } etc... or else the function will automatically execute when the page load for the first time and on every state change, this is just because of the syntax.

Upvotes: 1

Related Questions