親コンポーネントから子コンポーネントへのPropsの渡し方

Question

前提・実現したいこと

React Nativeで開発を行なっています。
CommentIndex.jsにあるthis.state.pickを、CommentItem.jsこのコンポーネントに渡したいと考えているのですが、
this.state.pickがUndefinedになってしまいます。

該当のソースコード

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

export default class CommentIndex extends Component<{}> {

  constructor(props) {
    super(props);

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

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

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

    this.setState({
      list,
    });
  }


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

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

    return (
      <View style={styles.container}>
      <Text>あなたの仲間の行動を紹介しよう</Text>
        <View style={styles.main}>
          <View style={styles.post}>
          <View style={styles.dropdown}>
            <View style={{height: 0}} />
            <DropdownMenu
              style={{flex: 1}}
              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} />}
            />
          </View>
        </View>
      </View>
    );
  }
}

CommentItem.js

const CommentItem = (props) => {
  const {
    text,
  } = props;


  return (
    <View style={styles.container}>
      <Text>{this.props.pick}</Text>
      <View style={styles.left}>
        <Text style={styles.text} >{text}</Text>
      </View>
      <ApplauseButton />
    </View>
  );
}

export default CommentItem;

propsの渡し方にどこか問題はありますでしょうか？
アドバイスいただけたら幸いです。よろしくお願いします。

Answer 1

propsの渡し方にどこか問題はありますでしょうか？

<CommentItem {...item} />となっていますので、itemオブジェクトに入っているものしか渡されません（stateは親子で共有されません）。

<CommentItem {...item} picks={this.state.picks} />として、CommentItemではthis.props.picksで参照しましょう。

Comments

[gnx_vw903]

素早いコメント有り難うございます！！
とても参考になりました！
今後ともお願い致します！