React Native - Can I pass state objects to child component from parent?

Question

New to React Native. I am creating a registration form where I have created a form wizard, each step of the has a different component. I want to handle every input's state from Parent Component.

Error:

 Invariant Violation: Invariant Violation: Invariant Violation: Invariant Violation: Objects are not valid as a React child (found:
 object with keys {_40, _65, _55, _72}). If you meant to render a
 collection of children, use an array instead.
     in RCTView (at View.js:45)
     in RCTScrollView (at ScrollView.js:977)
     in ScrollView (at KeyboardAwareHOC.js:397)
     in _class (at Content.js:125)
     in Content (at connectStyle.js:384)
     in Styled(Content) (at RegisterBusiness.js:271)
     in RCTView (at View.js:45)
     in Container (at connectStyle.js:384)
     in Styled(Container) (at RegisterBusiness.js:242)
     in RegisterBusiness (at SceneView.js:9)
     in SceneView (at StackViewLayout.js:478)
     in RCTView (at View.js:45)
     in RCTView (at View.js:45)
     in RCTView (at View.js:45)
     in AnimatedComponent (at screens.native.js:58)
     in Screen (at StackViewCard.js:42)
     in Card (at createPointerEventsContainer.js:26)
     in Container (at StackViewLayout.js:507)
     in RCTView (at View.js:45)
     in ScreenContainer (at StackViewLayout.js:401)
     in RCTView (at View.js:45)
     in StackViewLayout (at withOrientation.js:30)
     in withOrientation (at StackView.js:49)
     in RCTView (at View.js:45)
     in Transitioner (at StackView.js:19)
     in StackView (at createNavigator.js:57)
     in Navigator (at createKeyboardAwareNavigator.js:11)
     in KeyboardAwareNavigator (at createNavigationContainer.js:376)
     in NavigationContainer (at SceneView.js:9)
     in SceneView (at DrawerView.js:87)
     in RCTView (at View.js:45)
     in AndroidDrawerLayout (at DrawerLayoutAndroid.android.js:205)
     in DrawerLayoutAndroid (at DrawerView.js:84)
     in DrawerView (at createNavigator.js:57)
     in Navigator (at createNavigationContainer.js:376)
     in NavigationContainer (at SceneView.js:9)
     in SceneView (at SwitchView.js:12)
     in SwitchView (at createNavigator.js:57)
     in Navigator (at createNavigationContainer.js:376)
     in NavigationContainer (at App.js:135)
     in RCTView (at View.js:45)
     in Root (at connectStyle.js:384)
     in Styled(Root) (at App.js:134)
     in App (at renderApplication.js:34)
     in RCTView (at View.js:45)
     in RCTView (at View.js:45)
     in AppContainer (at renderApplication.js:33)

 This error is located at:
     in RCTView (at View.js:45)
     in RCTScrollView (at ScrollView.js:977)
     in ScrollView (at KeyboardAwareHOC.js:397)
     in _class (at Content.js:125)
     in Content (at connectStyle.js:384)
     in Styled(Content) (at RegisterBusiness.js:271)
     in RCTView (at View.js:45)
     in Container (at connectStyle.js:384)
     in Styled(Container) (at RegisterBusiness.js:242)
     in RegisterBusiness (at SceneView.js:9)
     in SceneView (at StackViewLayout.js:478)
     in RCTView (at View.js:45)
     in RCTView (at View.js:45)
     in RCTView (at View.js:45)
     in AnimatedComponent (at screens.native.js:58)
     in Screen (at StackViewCard.js:42)
     in Card (at createPointerEventsContainer.js:26)
     in Container (at StackViewLayout.js:507)
     in RCTView (at View.js:45)
     in ScreenContainer (at StackViewLayout.js:401)
     in RCTView (at View.js:45)
     in StackViewLayout (at withOrientation.js:30)
     in withOrientation (at StackView.js:49)
     in RCTView (at View.js:45)
     in Transitioner (at StackView.js:19)
     in StackView (at createNavigator.js:57)
     in Navigator (at createKeyboardAwareNavigator.js:11)
     in KeyboardAwareNavigator (at createNavigationContainer.js:376)
     in NavigationContainer (at SceneView.js:9)
     in SceneView (at DrawerView.js:87)
     in RCTView (at View.js:45)
     in AndroidDrawerLayout (at DrawerLayoutAndroid.android.js:205)
     in DrawerLayoutAndroid (at DrawerView.js:84)
     in DrawerView (at createNavigator.js:57)
     in Navigator (at createNavigationContainer.js:376)
     in NavigationContainer (at SceneView.js:9)
     in SceneView (at SwitchView.js:12)
     in SwitchView (at createNavigator.js:57)
     in Navigator (at createNavigationContainer.js:376)
     in NavigationContainer (at App.js:135)
     in RCTView (at View.js:45)
     in Root (at connectStyle.js:384)
     in Styled(Root) (at App.js:134)
     in App (at renderApplication.js:34)
     in RCTView (at View.js:45)
     in RCTView (at View.js:45)
     in AppContainer (at renderApplication.js:33)

 This error is located at:
     in NavigationContainer (at SceneView.js:9)
     in SceneView (at DrawerView.js:87)
     in RCTView (at View.js:45)
     in AndroidDrawerLayout (at DrawerLayoutAndroid.android.js:205)
     in DrawerLayoutAndroid (at DrawerView.js:84)
     in DrawerView (at createNavigator.js:57)
     in Navigator (at createNavigationContainer.js:376)
     in NavigationContainer (at SceneView.js:9)
     in SceneView (at SwitchView.js:12)
     in SwitchView (at createNavigator.js:57)
     in Navigator (at createNavigationContainer.js:376)
     in NavigationContainer (at App.js:135)
     in RCTView (at View.js:45)
     in Root (at connectStyle.js:384)
     in Styled(Root) (at App.js:134)
     in App (at renderApplication.js:34)
     in RCTView (at View.js:45)
     in RCTView (at View.js:45)
     in AppContainer (at renderApplication.js:33)

 This error is located at:
     in NavigationContainer (at SceneView.js:9)
     in SceneView (at SwitchView.js:12)
     in SwitchView (at createNavigator.js:57)
     in Navigator (at createNavigationContainer.js:376)
     in NavigationContainer (at App.js:135)
     in RCTView (at View.js:45)
     in Root (at connectStyle.js:384)
     in Styled(Root) (at App.js:134)
     in App (at renderApplication.js:34)
     in RCTView (at View.js:45)
     in RCTView (at View.js:45)
     in AppContainer (at renderApplication.js:33)

 This error is located at:
     in NavigationContainer (at App.js:135)
     in RCTView (at View.js:45)
     in Root (at connectStyle.js:384)
     in Styled(Root) (at App.js:134)
     in App (at renderApplication.js:34)
     in RCTView (at View.js:45)
     in RCTView (at View.js:45)
     in AppContainer (at renderApplication.js:33) throwOnInvalidObjectType

Parent Component: Register.js

constructor() {
    super();
    this.state = {
        pageCount: 1,
        pageName : 'merchantReg',
        stepName: "Basic Details",
        merchantReg: {
          contactperson: "STAR",
          contactno: "1234567890",
          altcontactno: "",
          email: "",
          altemail: "",
          legalname: "",
          dbaname: "",
          typeofpos: "NA",
          noofpos: "0",
          pacakage: "NA",
          natureofbusiness: "NA",
        },
        businessReg : {
          businessType: "",
          gststatus:"",
          gstno:"",
          panno:"",
          tinno:"",
          shopno:"",
          salestaxno:"",
          officepremisis:"",
          currentlocation:"",
          businesslastyear:"",
          averagebillamt:"",
          expectedcardbusiness:"",
        },
        residenceaddress:"",
        bankDetails : {
          bankname:"",
          bankbranch:"",
          accountname:"",
          accountno:"",
          ifsccode:"",
          aadharno:"",
          posstatement:"",
          posfirc:"NA",
          fircfreq:"NA",
        },
        mdr:{
          debitcardpremium:"",
          debitcardclassic:"",
          creditcardclassic:"",
          creditcardpremium:"",
          foreigncard:"",
          terminal_service_fee:"",
          terminal_type:"",
          posamount:""
        }
    }
 }


_storetoState = (key1,value) => {
  var page = this.state.pageName;
  this.setState({
    [page]: {
          ...this.state[page],
          [key1] : value
    }
  })
}

StepsofRegistrations = async () => {
  switch(this.state.pageCount){
    case 1: {

        requiredFields = [];
        requiredFields.push('contactperson','contactno','email','legalname','dbaname','typeofpos');
        return (<MerchantRegister value={this.state.merchantReg} handleChange={this._storetoState} />);
        break;
    }
    case 2: {
        requiredFields = [];
        requiredFields.push('contactperson','contactno','email','legalname','dbaname','typeofpos');
        return(<ShopDetails  value={this.state.businessReg} handleChange={this._storetoState}/>);
        break;
    }

  }
}


  render() {
    return (
      <Container>
        <Header noShadow>
          <Left>
            <Button transparent onPress={() => this.props.navigation.goBack()}>
              <Icon name='arrow-back'/>
            </Button>
          </Left>
          <Body>
            <Title style={{
              width: 215
            }}>
              Register a New Business
            </Title>
          </Body>
          <Right></Right>
        </Header>

          <View style={{
              paddingHorizontal:30,
              padding:10,
              backgroundColor:'#eee',
              flexDirection:'row',
              justifyContent:'space-between',
              elevation:1
            }}>
              <View><Text style={{fontSize:18}}>{this.state.stepName}</Text></View>
              <View><Text style={{fontSize:17,textAlign:'right'}}>{this.state.pageCount}/6</Text></View>
            </View>

        <Content>

          <View style={{
            borderWidth:0.2,
            borderColor:'#ccc',
          }}></View>

            {this.StepsofRegistrations()}


        </Content>

      </Container>
    );
  }

One fo my Child component all my other components are same as the below code they have only changed names.

import React, {Component} from 'react';
import { View, Text, StyleSheet, AsyncStorage, ScrollView } from 'react-native';
import { Picker, Label, Item, Input, Icon } from 'native-base';
import PropTypes from 'prop-types'

class MerchantRegister extends Component {

  render() {

    return (
      <ScrollView style={{
        paddingHorizontal: 30,
        paddingVertical: 20
      }}>

        <View style={{
          marginVertical: 10
        }}>

          <Label
            style={{
            fontSize: 14,
            marginBottom: 10
          }}>
            Contact Person
          </Label>
          <Item regular>
            <Input value={this.props.value.contactperson} onChangeText={value => this.props.handleChange("contactperson",value)}/>
          </Item>
        </View>

        </View>
      </ScrollView>
    );
  }
}



MerchantRegister.propTypes = {
  value: PropTypes.object.isRequired,
}

export default MerchantRegister;

Whenever I remove {this.StepsofRegistrations()} from Register Component it works fine but when I remove all the content from the {this.StepsofRegistrations()} this function this still gives me error.

Could You please show more precisely where do You pass props to child components? I've also noticed your `MerchantRegister` Class component doesn't have `constructor()` function with called `super(props)` which is necessary if You want to use props in child. And for that kind of complexity in state I would recommend You to think about using `Redux` or `Context API` to have shared state only when You need it and avoid passing it down at every level. — Roman Batsenko, Nov 30 '18 at 08:03
and here I am accessing state as a prop ` this.props.handleChange("contactperson",value)}/>` — Ankit S., Nov 30 '18 at 08:43
Remove at least the async stuff from _storeToState, it is not needed there. You pattern otherwise is very similar I've used. — Janne, Nov 30 '18 at 08:44
Can you remove any parts of this code that are not actually relevant to this question? Right now it's just a wall of code and hard to see what the issue actually is. Try to make the example as minimal as possible. — apokryfos, Nov 30 '18 at 08:55
And could You please share the full error text with us? Maybe it has a line of code where does this happen or something helpful. — Roman Batsenko, Nov 30 '18 at 08:57
@apokryfos I have removed some unwanted code could you please see them now — Ankit S., Nov 30 '18 at 09:04
@RomanBatsenko I have shared the full error code can u please check them now — Ankit S., Nov 30 '18 at 09:05

Ankit Sharma · Accepted Answer · 2018-11-30T09:29:18.040

3

Removing async from this.StepsofRegistrations() worked for me. But for more information you can look at : https://stackoverflow.com/a/37997990/4315757

edited Nov 30 '18 at 09:29

answered Nov 30 '18 at 09:22

Ankit Sharma

156
3
16

1

General comment is that you need async calls only if you're really calling functions that return Promises (http requests, db requests etc.) When you play with your app locally you don't generally need to do any of those. – Janne Nov 30 '18 at 10:18

React Native - Can I pass state objects to child component from parent?

1 Answers1