How to make a multiple button on a single onClick count in react ts?

Question

I had this problem several counts to be increment upon click.

let count = [{id: 1, value 0}, {id: 2, value 0}]

const [counter,setCounter] = useState(counter)

increment = () => {
   I want to set counter value depends on the button click and the counter will add 1 only to the specific count above.
}

return <div>
         <input type='text' value='count1'>{count1}</h2> <- I know that this does not work
         <button onClick={increment()}>+</button>
         <input type='text' value='count1'>{count2}</h2>
         <button onClick={increment()}>+</button>

Thanks.

Do you mean this? const [counter, setCounter] = useState({ count1: 0, count2: 0}) — William
– William, Commented Nov 11, 2020 at 7:19
yes. and then when you set the counter, reset the entire object: setCounter({count1: 2, ...counter}) — Zach Smith
– Zach Smith, Commented Nov 11, 2020 at 12:57

Sreekar Mouli · Accepted Answer · 2020-11-11 16:35:17Z

1

Not sure what you're exactly trying to do, but I think this should help you out

import React, { useState } from "react";
import "./styles.css";

export default function App() {
    let count = {
        1: 0,
        2: 0
    };
    const [counter, setCounter] = useState(count);
    const increment = (id) => {
        setCounter({ ...counter, [id]: counter[id] + 1 })
    };
    
    return (
        <div className="App">
            <input type='text' id="1" value={counter[1]}></input>
            <button onClick={() => { increment(1) }}>+</button>
            <input type='text' id="2" value={counter[2]}></input>
            <button onClick={() => { increment(2) }}>+</button>
        </div>
    );
}

You can run the codesandbox here https://codesandbox.io/s/dank-mountain-bmkgi

edited Nov 11, 2020 at 16:35

Sreekar Mouli

1,4725 gold badges27 silver badges50 bronze badges

answered Nov 11, 2020 at 7:28

Siddhant Varma

5945 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

How to make a multiple button on a single onClick count in react ts?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related