react 子コンポーネントの排他処理（クラスのオンオフ）

https://teratail.com/questions/214103
でご質問させていただいたのですが、どうもうまくいかず再掲載です。
（前回分は念のためまだ解決済みにしておりません。）

https://codepen.io/ashpwwqg/pen/zYOgZGP
にソースを用意させていただいたのですが、
簡単に解説すると複数のボタンをmapで配置しており、
クリックしたものに特定のクラスをつけて選択されている状態を表現したいのですが、
（ここまでは一回できました）
ただ、ほかのボタンコンポーネントが選択された状態のままになってしまうので、
常にどれかひとつのみ選択された状態にしたいのですが、
どうもうまくできません。。

どのようにしたらよいかご教授いただけますと幸いです。。

行動規範の内容に同意します

回答1件

ベストアンサー

CodePen の React のバージョンを見たら v0.13 びっくりしたので v16.8 を使っています。

jsx
1const preDataMembers = [{
2  id: 1,
3  name: "あああ ああああ",
4}, {
5  id: 2,
6  name: "いいい いいいい",
7}, {
8  id: 3,
9  name: "ううう うううう",
10}];
11
12function Members() {
13  const [members, setMembers] = React.useState(preDataMembers);
14  const [selectedMemberId, setSelectedMemberId] = React.useState();
15  
16  return (
17    <section>
18      {members.map((member) => (
19        <Member
20          name={member.name}
21          id={member.id}
22          onSelect={setSelectedMemberId}
23          selected={member.id === selectedMemberId}
24        />
25      ))}
26    </section>
27  );
28}
29
30function Member({ id, name, onSelect, selected }) {
31  const createClickHandler = (memberId) => (event) => {
32    onSelect(memberId);
33  }
34  
35  return (
36    <div onClick={createClickHandler(id)}>
37      <div style={{ color: selected && 'red' }}>
38        <span>{id}</span>
39        {name}
40      </div>
41    </div>
42  );
43}
44
45const App = () => (<Members />);
46
47ReactDOM.render(
48  <App />,
49  document.querySelector('#root'),
50);