React render button 'x' of times - reactjs

Question

I have a switch button that I want to copy ten times but when I copy the button to new div it does not let me click on second button onwards, I can change state of one first button only. Here is my code
class App extends Component {
handleSwitch = e => console.log(e.target.checked);
render() {
return (
<div>
<div>
<p className="title">source</p>
<label className="label">Button</label>2
<SwitchButton
onChange={this.handleSwitch}
title="SwitchButton"
data-name="vd"
/>
</div>
<div>
<label className="label">Button2</label>
<SwitchButton
onChange={this.handleSwitch}
title="SwitchButton2"
data-name="vd1"
/>
</div>
</div>
);
}
}
here is my live demo : https://stackblitz.com/edit/react-ts-9n4lwa?file=index.tsx

Answer 1

You should set a unique switchButtonID in each SwitchButton
import React, { Component } from 'react';
import { render } from 'react-dom';
import SwitchButton from './Hello';
import './style.scss';
class App extends Component {
handleSwitch = e => console.log(e.target.checked);
render() {
return (
<div>
<div>
<p className="title">Precursor source</p>
<label className="label">Ch1_PulsingValveActivationlnSw</label>
<SwitchButton
switchButtonID={1}
onChange={this.handleSwitch}
title="SwitchButton"
data-name="vd"
/>
</div>
<div>
<label className="label">Ch1_PulsingValveActivationlnSw</label>
<SwitchButton
switchButtonID={2}
onChange={this.handleSwitch}
title="SwitchButton2"
data-name="vd1"
/>
</div>
</div>
);
}
}
render(<App />, document.getElementById('root'));