Propsを親から子に渡し、さらにその子に渡す方法

Question

前提・実現したいこと

Propsを親から子に渡し、さらにそのpropsをその子に渡したいと考えています。

親から子に関してはFlatListの中で、Listにmainuser: this.state.headをpushし、renderItem={({ item }) => <CommentItem {...item}で子に渡しています。

子(CommentItem)の受け取りに関しては、constにmainuserを設定することで
子で受け取れるようになっています。

const CommentItem = (props) => {
  const {
    mainuser,
  } = props;
  return (
　　<View style={styles.container}>
      <View style={styles.left}>
        <Text style={styles.text}>{text}</Text>
      </View>
      <View style={styles.function}>
        <Button {...mainuser} />
      </View>
    </View>
  );
}

export default CommentItem;

さらにこの親から子(CommentInput)が受け取ったmainuserを、そのまた子（孫？<Button>）に渡したいと考えています。
<Button {...mainuser} />で子から孫に渡すことができているとは思うのですが、
孫ではrenderのなかにconst { mainuser,} = this.props;を記述して受け取れてはいると思うのですがmainuserは空になっています。

孫(Button.js)は以下のようになっています

export default class Button extends Component {

  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
　render() {
    const {
        mainuser,
    } = this.props;

    return (
....

親は以下のようになっています（App.js）

export default class App extends Component<{}> {

  constructor(props) {
    super(props);

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

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

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

    this.setState({
      list,
    });
  }

  render() {
    const {
      head,
      list,
    } = 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}
          >
          </DropdownMenu>
        </View>
        </View>
      <Text>To Do</Text>
        <View style={styles.main}>
          <View style={styles.post}>
            </View>
            <View style={styles.postinput}>
              <CommentInput onPress={this._onPress} />
            </View>
          <View style={styles.CommentListContainer}>
            <FlatList
              style={styles.CommentList}
              data={list}
              renderItem={({ item }) => <CommentItem {...item}  />}
            />
          </View>
        </View>
      </View>
    );
  }
}

お聞きしたいこと

まとめると以下のようになります。

親(App.js) = FlatListのアイテムにmainuser: this.state.headをPushして、子に渡す。
子(CommentItem)　= const {mainuser} = props;で受け取り、<Button {...mainuser} />で孫に渡す
孫(Button) ＝ render内のconst {mainuser} = props;で受け取れているはず？

このようにPropsを親から子、子から孫(？)に渡すことは可能なのでしょうか？
また、上記のプロセスで間違いの場所はありますでしょうか？

何かアドバイスがありましたら幸いです。
よろしくお願いいたします。

Answer 1

propsとして渡すなら
<Button mainuser={mainuser} />
とする必要がありました。

Comments

[noka_blank]

自己解決できたようでよかったです。

[gnx_vw903]

ありがとうございます！

Answer 2

StateとPropsは別物ですので、問題なく扱えると思います。
render関数の中で、this.props.hogehogeで取得できます。

Comments

[gnx_vw903]

素早いご返答ありがとうございます。
render関数の中で、`this.props.mainuser`とコードを書いたのですが、`mainuser`を表示することができませんでした。
子(CommentItem)のようにrender以前にpropsを指定するコードが必要でどのように書くのかお聞きしたかったのですが、そのようなコードは比喩ようないのでしょうか？
よろしくお願いいた
します。