react.js クリックでクラスのオンオフをしたい

Question

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {  
    return (
      <section>
         <List name="あああ" num="1" />
         <List name="あああ" num="2" />
         <List name="あああ" num="3" />
      </section>
    );
  }
}


//あああデータ
class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  Choose = (e) => {
    this.setState({ Name: !this.state.Name });
  };

  render() {
	  
    const Name = ClassNames({
      [theme.Name]: this.state.Name,
    });
	  
	  
    return (
		
		<div
			className={Name}
			onClick={ this.Choose.bind(this) }
		>
			<div>{this.props.name}</div>
			<div>{this.props.num}</div>
		</div>
		
    )
	
  }
}

上記のような形で、子コンポーネントをクリックすると.Nameのcssがつくようにしているですが、
クリックしたもの以外の兄弟Listからは、.Nameをはずしたいのですがどうすればよいでしょうか？
現状ですと、クリックしたら.Nameがすべてついたままになってしまいます。
（排他関係にしたい）

Answer 1

なんか美しくない気がしますが、こんな感じで……
子のイベントを親に渡すのは結構大変というか処理の流れがわかりにくくなるので、排他処理が必要な場合は親で処理してあげたほうがよいと思います

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedNum: 0,
    };
  }
  
  onListSelected(nextSelectedNum) {
    this.setState({selectedNum: nextSelectedNum})
  }

  render() {  
    return (
      <section>
        {
          [1, 2, 3].map(num => (
            <List
              name="あああ"
              num={num}
              onClick={() => this.onListSelected(num)}
              selected={this.state.selectedNum === num}
              key={num}
            />
          ));
        }
      </section>
    );
  }
}


//あああデータ
class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const Name = this.props.selected? Name = ClassNames({
      [theme.Name]: this.state.Name,
    }) : '';

    return (
      <div
        className={Name}
        onClick={ this.Choose.bind(this) }
      >
        <div>{this.props.name}</div>
        <div>{this.props.num}</div>
      </div>
    );
  }
}

Comments

[cheche0830]

ああ！！なるほど、そのような手が・・・！
ありがとうございました！！！！