To Doリストで親から子に渡った要素をリストアップする方法

Question

前提・実現したいこと

React Nativeの勉強をToDoリストを作りながら行なっています。

ToDOリストにトップで選択したユーザーからテキストの横で選択したユーザーへのToDoか情報も追加したいと考えています。
1個目のToDoは無事に表示することができましたが、
２回目に違うユーザーを選択してまたToDoを追加するとToDoにあるユーザーの情報が全て２回目にその選択したユーザーの情報になってしまいます。

現状 head={this.state.head}とpick={this.state.pick} 親から子に渡しているのですが、渡した情報を子にそのまま残して、
親のthis.state.headとthis.state.pickが変わった時にはまた違う要素を渡すなどはできますでしょうか？

アドバイスいただけたら幸いです。
よろしくお願いいたします。

最初にToDoに追加した時

２回目に追加した時

該当のソースコード

以下コードの全文になります
CommentIndex.js

export default class CommentIndex extends Component<{}> {

  constructor(props) {
    super(props);

    this.state = {
      head: [],
      list: [],
      pick: [],
    };
  }

  _onPress = (text) => {
    const list = [].concat(this.state.list);

    list.push({
      key: Date.now(),
      text: text,
      done: false,
    });

    this.setState({
      list,
    });
  }

  render() {
    const {
      head,
      list,
      pick,
    } = this.state;

    var data = [["User1", "User2", "User3"],];

    return (
      <View style={styles.container}>
        <View style={styles.dropdownHeader}>
        <View style={styles.dropdown}>
          <DropdownMenu
            style={{flex: 1}}
            bgColor={'white'}
            tintColor={'#666666'}
            activityTintColor={'green'}
            handler={(selection, row) => this.setState({head: data[selection][row]})}
            data={data}
          >
            <View style={styles.userHeader}>
              { this.state.head === 'User1' && <User1 /> }
              { this.state.head === 'User2' && <User2 /> }
              { this.state.head === 'User3' && <User3 /> }
            </View>
          </DropdownMenu>
        </View>
        </View>
      <Text>To Do</Text>
        <View style={styles.main}>
          <View style={styles.post}>
            <View style={styles.dropdown}>
              <View style={{height: 0}} />
              <DropdownMenu
                bgColor={'white'}
                tintColor={'#666666'}
                activityTintColor={'green'}
                handler={(selection,row) => this.setState({pick: data[selection][row]})}
                data={data}
              >
                <View style={styles.user}>
                  { this.state.pick === 'User1' && <User1_photo /> }
                  { this.state.pick === 'User2' && <User2_photo /> }
                  { this.state.pick === 'User3' && <User3_photo /> }
                </View>
              </DropdownMenu>
            </View>
            <View style={styles.postinput}>
              <CommentInput onPress={this._onPress} />
            </View>
          </View>
          <View style={styles.CommentListContainer}>
            <FlatList
              style={styles.CommentList}
              data={list}
              renderItem={({ item }) => <CommentItem {...item} head={this.state.head} pick={this.state.pick}/>}
            />
          </View>
        </View>
      </View>
    );
  }
}

CommentItem.js

export default class CommentInput extends Component {
    constructor(props) {
        super(props);

        this.ref = {};
    }

    _onPress = () => {
        this.props.onPress(this.ref._lastNativeText);
        this.ref.setNativeProps({ text: '' });
    }

    render() {
        const {
            onPress,
        } = this.props;

        return (
            <View style={styles.container}>
                <TextInput
                    style={styles.textInput}
                    ref={(ref) => { this.ref = ref; }}
                />
                <TouchableOpacity
                    style={styles.button}
                    onPress={this._onPress}
                >
                    <Text style={styles.buttonText}>追加</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

Answer 1

FlatListのrenderItemのなかに
head={this.state.head}とpick={this.state.pick}を追加すると
renderIした時のhead={this.state.head}とpick={this.state.pick}が子に渡され実装できました。

list.push({
  key: Date.now(),
  text: text,
  done: false,
  head={this.state.head},
  pick={this.state.pick},
});