Props method invoked automatically in react hooks

Question

Hello All I am new guy working with react hooks. In the code given below I am passing my function as props and onclick it should delete the selected the id but It is getting invoked without calling it.

Here is my code:

App.js

    import React, { useState } from 'react';
    import './App.css';
    import Keypad from './components/Keypad';
    import Result from './components/Result';
    import Alerts from './components/Alerts';
    import ShowTickets from './components/ShowTickets';
    import uuid from 'uuid';
    const uuidv4 = require('uuid/v4');

    function App() {
      const [result, setResult] = useState('');
      const [tickets, setTickets] = useState([]);
      const [showMessage, setShowMessage] = useState(false);
      const [message, setMessage] = useState('');
      const [count, setCount] = useState(1);

      const deleteTicket = id => {
        console.log(id + ' from delete');
        const data = tickets.filter(ticket => ticket.id !== id);
        setTickets(data);
      };
      const randomNumber = () => {
        setResult(Math.floor(100000 + Math.random() * 900000));
      };
      const backSpace = () => {
        if (result.length !== 0) {
          setResult(result.substring(0, result.length - 1));
        } else {
          error('Enter some number to remove');
        }
      };
      const cb = value => {
        if (result.length <= 5) {
          setResult(result + value);
        } else {
          error('Only 6 digit tickets are allowed');
        }
      };
    const deleteAll = ()=>{
    setResult('')
    }
      const error = message => {
        setShowMessage(true);
        setMessage(message);
        setTimeout(() => {
          setShowMessage(false);
          setMessage('');
        }, 3000);
      };
      const addTicket = () => {
        if (result !== '') {
          if (count <= 5) {
            if (parseInt(result) < 100000 || parseInt(result) > 999999) {
              error('Value should be between 100000 & 999999');
            } else {
              setCount(count + 1);
              const ticket = { count: count, value: result, id: uuidv4() };
              setTickets(tickets => [...tickets, ticket]);
            }
          } else {
            error('Only 5 tickets allowed');
          }
        } else {
          error('Set the ticket id before adding ticket');
        }
      };
      return (
        <div className='ta-center'>
          <center>
            {showMessage ? <Alerts message={message} /> : ''}
            {result !== '' ? <Result result={result} /> : ''}
            <Keypad cb={cb} backSpace={backSpace} />
            <button className='width' name='add' onClick={addTicket}>
              <i className='fa fa-plus'></i>Add Tickets
            </button>
            {tickets.length ? (
              <ShowTickets tickets={tickets} deleteTicket={deleteTicket} />
            ) : (
              'No tickets to show'
            )}
          </center>
        </div>
      );
    }

    export default App;

Keypad.js

    import React from 'react';

    const Keypad = ({ cb, backSpace, deleteAll}) => {
      return (
        <div className='button'>
          <button name='7' onClick={e => cb(e.target.name)}>
            7
          </button>
          <button name='8' onClick={e => cb(e.target.name)}>
            8
          </button>
          <button name='9' onClick={e => cb(e.target.name)}>
            9
          </button>
          <br />
          <button name='4' onClick={e => cb(e.target.name)}>
            4
          </button>
          <button name='5' onClick={e => cb(e.target.name)}>
            5
          </button>
          <button name='6' onClick={e => cb(e.target.name)}>
            6
          </button>
          <br />

          <button name='1' onClick={e => cb(e.target.name)}>
            1
          </button>
          <button name='2' onClick={e => cb(e.target.name)}>
            2
          </button>
          <button name='3' onClick={e => cb(e.target.name)}>
            3
          </button>
          <br />
          <button name='C' onClick={e => backSpace()}>
            <i className='fa fa-arrow-left'></i>
          </button>
          <button name='0' onClick={e => cb(e.target.name)}>
            0
          </button>
          <button name='CE' onClick={e => deleteAll()}>
            <i className='fa fa-trash'></i>
          </button>
          <br />
        </div>
      );
    };

    export default Keypad;

Result.js

    import React from 'react';

    const Result = ({ result }) => {
      return (
        <div>
          {result.length === '' ? (
            <small>
              <div className='danger'>Enter 6 digits</div>
            </small>
          ) : (
            <h3>{result}</h3>
          )}
        </div>
      );
    };
    export default Result;

Alerts.js

    import React from 'react';

    const Alerts = ({ message }) => {
      return (
        <div className='alert alert-danger'>
          <strong>{message}</strong>
        </div>
      );
    };
    export default Alerts;

ShowTickets.js

    import React from 'react';

    const ShowTickets = ({ tickets, deleteTicket }) => {
      const cb = id => {
        deleteTicket(id);
      };
      return (
        <div>
          Your Selected Tickets are:
          {Object.entries(tickets).map(([key, val]) => (
            <h2 key={key}>
              <button onClick={cb(val.id)}>
                ticket #{parseInt(key) + 1} {val.value}
              </button>
            </h2>
          ))}
        </div>
      );
    };

    export default ShowTickets;

Onclicking the addticket I get id in console but no ticket is displayed. If I remove deletticket from there it works fine.

Answer 1

In your ShowTickets.js

<button onClick={cb(val.id)}>

you are calling handler not setting it. I believe it should be

<button onClick={() => cb(val.id)}>