[react]複数作成されるコンポーネントを一つずつ指定したい。

Question

コード

親コンポーネント

import React from 'react';
import PropTypes from 'prop-types';
import Component from './Component';

class test extends React.Component {
  static propTypes = {
  };

  constructor(props) {
    super(props);

    this.state = {
      array: [
        { class: 'first', length: 1},
        { class: 'second', length: 2},
        { class: 'third', length: 3}
      ],
    };
  }

  aaa(obj) {
    return (
      <Component
        choice={obj}
      />
    );
  }

  render() {
    const aaa = this.state.array.map((e) => {
      return (
        this.aaa(e)
      );
    });

    return (
      <div>
        {aaa}
      </div>
    );
  }
}

子コンポーネント

import React from 'react';
import PropTypes from 'prop-types';

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

    this.state = {
      bool: false
    };
  }

  render() {
    if (this.state.bool) {
      return (
        <div>なんかある</div>
      );
    } else {
      return (
        <div>なんもない</div>
      );
    }
  }
}

#現状
上記のようなコードを今書いているのですが、
親コンポーネントのstateを子のコンポーネントに渡す時に
stateをmapで回して、子のコンポーネントに渡すようにしています。
なので上記のコードを実行すると
「なんもない」という文字がブラウザ上に3つ表示されます。(子のコンポーネントが3つ作られている)

やりたいこと

この場合、
一番最初のアクセス時に
一つの目のコンポーネントのthis.state.boolをtrueにしたい場合どうすればいいですか？

#やってみたこと
componentWillMountの中でconsole.log('ほにゃらら');とかを実行しても3個分出るだけだった。

Comments

[HayatoKamono]

解決したのであれば質問を閉じて下さい。解決していないのであれば質問内容を修正し、より質問内容を明確にするなりした下さい。