更改使用地图呈现的元素的样式

Question

你好，我想在单击元素样式时更新它。当前，当我单击该元素时，每个地图元素的样式都会更改。我只想一次单击一次就更改一个元素的样式。希望你能理解。

class Main extends Component {
  constructor(props) {
    super(props);

    this.state = {
      playing: false
    };
  }

    handleClickSound = (url, soundName) => {
    const power = this.props.power.power;
    if (power) {
      this.playSound(url, soundName);
      this.togglePlaying();
    } else return alert("Please turn the app on!");
  };

    togglePlaying = () => {
    this.setState({ playing: true });
    setTimeout(() => {
      this.setState({ playing: false });
    }, 200);
  };
   render() {

          <div className="drum-pads">
            <RenderButton
              handleClickSound={this.handleClickSound}
              playing={this.state.playing}
            />
          </div>


}
}
const RenderButton = props => {
  const onStyle = {
    transform: "scale(0.95)",
    boxShadow: "1px 1px 4px 4px #D81159, -1px -1px 4px 4px #FFBC42"
  };
  const offStyle = props.power.power
    ? { backgroundColor: "var(--ltRed)" }
    : { backgroundColor: "var(--dkRed)" };

  const data = props.dataObj.map(a => {
    return (
      <div
        key={a.id}
        className="outer-pad"
        style={props.playing ? onStyle : offStyle}
      >
        <div
          className="inner-pad"
          data-key={a.keyCode}
          onClick={() => {
            props.handleClickSound(a.url, a.name, a.id);
          }}
        >
          <kbd>{a.trigger}</kbd>
          <span className="sound">{a.name}</span>
        </div>
      </div>
    );
  });
  return <React.Fragment>{data}</React.Fragment>;
};

如果您需要其他任何信息，请告诉我。