Update/set state dynamically in reactjs

Question

I am new to reactjs and used to load/update data through javascript/jquery.

In my example I've got 3 buttons. Whenever I click one one button, I would like to update the text above. Right now, I am using same state for the counter. Can't you somehow get the current divs ID - and update the state inside it?

I could just change the state to 3 different states. But the reason why I am not doing this is if I ever want to load something dynamically they probably have the same state?

jsfiddle: https://jsfiddle.net/t9am76fs/1/

constructor(props) {
    super(props);

    this.state = {
        count: 0,
    };
}
incrementCounter = (value) => {
    this.setState({ count: this.state.count + value })
};

render() {
    return (
        <div>
            <div id='div1'>
                  <p>You clicked {this.state.count} times</p>
                  <button onClick={() => this.incrementCounter(1)}>+1</button>
            </div>

            <div id='div2'>
                  <p>You clicked {this.state.count} times</p>
                  <button onClick={() => this.incrementCounter(1)}>+1</button>
            </div>

            <div id='div3'>
                  <p>You clicked {this.state.count} times</p>
                  <button onClick={() => this.incrementCounter(1)}>+1</button>
            </div>
        </div>
    );
}

Thanks

Answer 1

You can also do it by giving the input names and accessing these via the event.target.name and use that to update state depending on the given name.

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: [0,0,0]
        };
    }
    incrementCounter = (event) => {
        const updatedCount = [...this.state.count] // Create a shallwo copy
        updatedCount[Number(event.target.name)]++
        this.setState({ count: updatedCount })
    };

    render() {
    const [count1, count2, count3] = this.state.count;
        return (
            <div>
                <div id='div1'>
                      <p>You clicked {count1} times</p>
                      <button name='0' onClick={this.incrementCounter}>+1</button>
                </div>

                <div id='div2'>
                      <p>You clicked {count2} times</p>
                      <button name='1' onClick={this.incrementCounter}>+1</button>
                </div>
                
                <div id='div3'>
                      <p>You clicked {count3} times</p>
                      <button name='2' onClick={this.incrementCounter}>+1</button>
                </div>
            </div>
        );
    }
}

ReactDOM.render(<Counter />, document.querySelector("#app"));	

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>