How to pass function as props in React?

reactjs

Solution

You can do it alternatively also

constructor() {
  super();
  this.state = {
    Location:[]
  }
}

function GetLocation() {
  axios.get('http://ipinfo.io').then((res) => { 
    this.setState ({
      Location:res.data.loc;
    });
  });
}

function GetWeather(props) {
  return <h1>Location: {this.props.location}</h1>;    
}
    
class LocalWeather extends Component {           
  componentDidMount() {    
    //code     
  }          

  render() {
    return (
      <div >                         
        <GetWeather location={this.GetLocation.bind(this)}/>                                            
      </div> 
    );
  }
}

Problem

I have functional component GetWeather which I want to pass result of GetLocation function as props based on which GetWetaher will do something i.e. another get request (in the example below it only renders its props). I think it has to happen inside ComponentDidMount, not sure how to do it ``` function GetLocation() { axios.get('http://ipinfo.io') .then((res) => { return res.data.loc; }) } function GetWeather(props) { //more code here, including another get request, based on props return <h1>Location: {props.location}</h1>; } class LocalWeather extends Component { componentDidMount() { //??? } render() { return ( <div > <GetWeather location={GetLocation}/> //??? </div> ); } } ``` Update: So based on suggestion from Damian below is working for me ``` function GetWeather(props) { return <h3>Location: {props.location}</h3>; } class LocalWeather extends Component { constructor(props) { super(props); this.state = { location: [] }; } getLocation() { axios.get('http://ipinfo.io') .then((res) => { this.setState({location:res.data.loc}); }) } componentDidMount() { this.getLocation(); } render() { return ( <div > <GetWeather location={this.state.location}/> </div> ); } } ```

Original source