title: How to pass props from component to another component
body: <p>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</p>
  
  <p>Console Log at the end, I need the actions to get passed to the child because the child needs the action</p>
  
  <p>The thing is the child is already rendered in the same screen so I don't know how to pass this information</p>
  
  <p>Parent component Radius:</p>
  
  <pre><code>render(){
      console.log("radiuscomp ", this.props)
      return(
          &lt;View&gt;
              &lt;View&gt;
                  &lt;AppHeaderBar onLeftButtonPress = {this.pop} title = "Radius"/&gt;
              &lt;/View&gt;
              &lt;ScrollView
              style = {{height: this.state.visibleHeight}}
              keyboardShouldPersistTaps = 'always'
              &gt;
                  {this.updateContent()}
                  &lt;SearchLocation /&gt; //this is the child component 
              &lt;/ScrollView&gt;
          &lt;/View&gt;
      )
  }
  
  function mapStateToProps(state){
      return {
         updateLocationList: state.taskListReducer.consumerTaskLocationHistoryEvent
      };
  }
  
  function mapDispatchtoProps(dispatch){
     return bindActionCreators(actions,dispatch);
  }
  
  let SearchRadiusContainer = connectEnhance(mapStateToProps,mapDispatchtoProps)(SearchRadiusComponent);
  </code></pre>
  
  <p>Child component Location:</p>
  
  <pre><code>render(){
      return(
          &lt;View&gt;
              &lt;View style = {Styles.search}&gt;
                  &lt;TouchableOpacity onPress={() =&gt; this.requestLocationPermission()}&gt;
                      &lt;Image style = {{width: 30, height: 30}} source = {require('../_shared/components/Images/map.png')} /&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;SearchBox
                  ref={ref =&gt; (this.autoCompleteInput = ref)}
                  onEndEditing={this.dismissLoading}
                  onChangeText={text =&gt; this.googlePlaceAutoCompletion(text)}
                  style={Styles.searchbox}
                  placeholder="Suburb or postcode"
                  /&gt;
              &lt;/View&gt;
              {this.alternateHistoryKeywords()}
          &lt;/View&gt;
      )
  }
  
  function mapStateToProps(state){
      return {
          updateLocationList: state.taskListReducer.consumerTaskLocationHistoryEvent
      };
  }
  
  function mapDispatchtoProps(dispatch){
     return bindActionCreators(actions,dispatch);
  }
  
  let SearchLocationContainer = connectEnhance(mapStateToProps,mapDispatchtoProps)(SearchLocationComponent);
  </code></pre>
  
  <p>Child need the actions from parent because of this code in child component that saves text input value</p>
  
  <pre><code>saveToHistory(){
      let here = false
      this.state.searchLocationList.filter((find, index) =&gt; {
          if(find.toLowerCase() == this.state.searchLocation.toLowerCase()){
              here = true
          }
      })
      if(here == false){
          this.setState({
              searchLocationList: [this.state.searchLocation, ...this.state.searchLocationList]
          },()=&gt; this.props.consumerTaskLocationHistoryEventAction(this.state.searchLocationList))  //this action is on parent but not on child
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/9DFzT.jpg" rel="nofollow noreferrer">Console Logs</a></p>