Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass function as props in React?

Tags:

reactjs

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> 
    );
  }
}
like image 723
irom Avatar asked May 01 '17 14:05

irom


People also ask

How do you pass a function as a parameter in React?

In order to pass a value as a parameter through the onClick handler we pass in an arrow function which returns a call to the sayHello function. In our example, that argument is a string: 'James': ... return ( <button onClick={() => sayHello('James')}>Greet</button> ); ...

Can you pass function to a component React?

With React, typically you only need to bind the methods you pass to other components. For example, <button onClick={this.handleClick}> passes this.handleClick so you want to bind it. However, it is unnecessary to bind the render method or the lifecycle methods: we don't pass them to other components.

How do you pass a function from one component to another in React JS?

you can simply pass the state with some name <Button name={stateValue}> and use it in your child component.


1 Answers

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> 
    );
  }
}
like image 179
Vikram Saini Avatar answered Nov 15 '22 05:11

Vikram Saini