CODEWITHSUNDEEP
react-nativereact-redux
Juan
Juan

Reputation: 99

How to pass props from component to another component

I have two components, one is rendered inside the other and the parent has some actions that are needed by the child but I don't know how to pass it down

Console Log at the end, I need the actions to get passed to the child because the child needs the action

The thing is the child is already rendered in the same screen so I don't know how to pass this information

Parent component Radius:

render(){
    console.log("radiuscomp ", this.props)
    return(
        <View>
            <View>
                <AppHeaderBar onLeftButtonPress = {this.pop} title = "Radius"/>
            </View>
            <ScrollView
            style = {{height: this.state.visibleHeight}}
            keyboardShouldPersistTaps = 'always'
            >
                {this.updateContent()}
                <SearchLocation /> //this is the child component 
            </ScrollView>
        </View>
    )
}

function mapStateToProps(state){
    return {
       updateLocationList: state.taskListReducer.consumerTaskLocationHistoryEvent
    };
}

function mapDispatchtoProps(dispatch){
   return bindActionCreators(actions,dispatch);
}

let SearchRadiusContainer = connectEnhance(mapStateToProps,mapDispatchtoProps)(SearchRadiusComponent);

Child component Location:

render(){
    return(
        <View>
            <View style = {Styles.search}>
                <TouchableOpacity onPress={() => this.requestLocationPermission()}>
                    <Image style = {{width: 30, height: 30}} source = {require('../_shared/components/Images/map.png')} />
                </TouchableOpacity>
                <SearchBox
                ref={ref => (this.autoCompleteInput = ref)}
                onEndEditing={this.dismissLoading}
                onChangeText={text => this.googlePlaceAutoCompletion(text)}
                style={Styles.searchbox}
                placeholder="Suburb or postcode"
                />
            </View>
            {this.alternateHistoryKeywords()}
        </View>
    )
}

function mapStateToProps(state){
    return {
        updateLocationList: state.taskListReducer.consumerTaskLocationHistoryEvent
    };
}

function mapDispatchtoProps(dispatch){
   return bindActionCreators(actions,dispatch);
}

let SearchLocationContainer = connectEnhance(mapStateToProps,mapDispatchtoProps)(SearchLocationComponent);

Child need the actions from parent because of this code in child component that saves text input value

saveToHistory(){
    let here = false
    this.state.searchLocationList.filter((find, index) => {
        if(find.toLowerCase() == this.state.searchLocation.toLowerCase()){
            here = true
        }
    })
    if(here == false){
        this.setState({
            searchLocationList: [this.state.searchLocation, ...this.state.searchLocationList]
        },()=> this.props.consumerTaskLocationHistoryEventAction(this.state.searchLocationList))  //this action is on parent but not on child
    }
}

Console Logs

Upvotes: 4

Views: 8545

Answers (1)

Daniel Rosenberg
Daniel Rosenberg

Reputation: 600

please don't use redux to pass props from parent to child. You need to know that you have smart components (connected to redux store) and plain components (know about redux nothing).

Your code should like this

state = {
  lon: 54.002,
  lat: 34.990,
}
render() {
  return (
     <Parent>
        <Child {...this.props} lat={this.state.lat} lon={this.state.long} />
     </Parent>
  );
}

{...this.props} makes a magic and all of your parent props will be passed to a child component. Just connect redux to parent component and add {...this.props} to child

Upvotes: 4

Related Questions