Why my onClick event is not working for useState when I am passing 2 arrow functions in it-CodePudding

Here is the code,

import React, { useEffect, useState } from 'react'
import './Body.css'
export default function Navbar() {
    const [value, setvalue] = useState(0);
    const [value1, setvalue1] = useState(0);
    return (
        <>
            <div>
                <h1>Our App</h1>

                <div className="back">
                    <h3>Counter</h3>
                    <button onClick={() => [() =>{setvalue(value - 1)} , ()=>{setvalue1(value1 - 1)}] }> - </button>
                    <button>{value}</button>
                    <button>{value1}</button>
                    <button onClick={()=> [() =>{setvalue(value   1)} , ()=>{setvalue1(value1   1)}] } >   </button>
                </div>
            </div >
        </>
    )
}

I checked here how to pass two functions in the onClick event and this is the only way I am not getting a syntax error.

Can anyone suggest some edits to this?

CodePudding user response：

Your click handler does not call the two functions instead, it returns two functions in an array.

You just need to call the two functions like this:

function Navbar() {
  const [value, setvalue] = React.useState(0);
  const [value1, setvalue1] = React.useState(0);
  return (
      <div>
        <h1>Our App</h1>

        <div className="back">
          <h3>Counter</h3>
          <button
            onClick={() => {
              setvalue((value) => value - 1);
              setvalue1((value1) => value1 - 1);
            }}
          >
            {" "}
            -{" "}
          </button>
          <button>{value}</button>
          <button>{value1}</button>
          <button
            onClick={() => {
              setvalue((value) => value   1);
              setvalue1((value1) => value1   1);
            }}
          >
            {" "}
             {" "}
          </button>
        </div>
      </div>
  );
}

ReactDOM.render(<Navbar />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

CodePudding user response：

In the code that you share, in onclick attribute you're executing an arrow function that only returns (implicitly) an array containing two functions, but no one es executed ever as they're only two references.

For this to work you must only call the arrow function and in that function execute your two setState(). Here's your code modified and working.

import { useState } from 'react';


export default function Navbar() {
    const [value, setvalue] = useState(0);
    const [value1, setvalue1] = useState(0);
    return (
        <>
            <div>
                <h1>Our App</h1>

                <div className="back">
                    <h3>Counter</h3>
                    <button onClick={() => {
                      setvalue(value - 1)
                      setvalue1(value1 - 1)
                    }}
                      > - </button>
                    <button>{value}</button>
                    <button>{value1}</button>
                    <button onClick={() => {
                      setvalue(value   1)
                      setvalue1(value1   1)
                    }} >   </button>
                </div>
            </div >
        </>
    )
}

CodePudding user response：

Verified & tested
onClick={()=> {setvalue(value 1); setvalue1(value1 1)};}}

CodePudding user response：

A simple way to solve your requirement is:

import React, { useEffect, useState } from 'react'
import './Body.css'
export default function Navbar() {
    const [value, setvalue] = useState(0);
    const [value1, setvalue1] = useState(0);
    const Clicked1 = async () => {
         setvalue(value - 1)
         setvalue1(value1 - 1)
    }
    const Clicked2 = async () => {
          setvalue(value   1)
          setvalue1(value1   1)
    }
    return (
        <>
            <div>
                <h1>Our App</h1>

                <div className="back">
                    <h3>Counter</h3>
                    <button onClick={Clicked1}> - </button>
                    <button>{value}</button>
                    <button>{value1}</button>
                    <button onClick={Clicked2} >   </button>
                </div>
            </div >
        </>
    )
}