Source:  Twitter logo

I am new to react and i am stuck on a certain project. The thing is that I have an api_url in this.props received from a parent component. And in this child component I want to use api_url to fetch some data using JSON.

In the parent component I have:

Repositories api_url={this.state.objs.repos_url}

and in the child component, I want something like:

componentDidMount() {    
    $.getJSON(this.props.api_url, function(json) {
        for (var i = 0; i < json.length; i++) {
            var each_repo = json[i]
            console.log(each_repo["name"]);
        }    
    });
}

so what I need is the corresponding api_url in the url section of $.getJSON.

Is there a way to access this.props in componentDidMount or is there some other way to achieve the same results?

Another thing regarding this, is that I'm also using a $.getJSON call in the ComponentDidMount of the parent component.

A thanks in advance.

In your class implement the constructor:

constructor(props){
  super(props);
  this.state = {
     //states
  };
}

componentDidMount(){
  //Get this.props
  console.log(this.props.nameOfProp);
};

Probably at this react version is more easy to get it.

18 users liked answer #0dislike answer #018
Angel Cuenca profile pic
Angel Cuenca

In order to access Props in the child component you need to create a constructor in the child component and then pass props as an attribute to the super() function as

constructor(props) {
   super(props);
   this.state = {}
}
componentDidMount(){

   $.getJSON(this.props.api_url , function(json) {
        for (var i = 0; i < json.length; i++) {
            var each_repo = json[i]
        console.log(each_repo["name"]);

      }

    });

  } 

Once you do this you can access props in your entire child component

4 users liked answer #1dislike answer #14
Shubham Khatri profile pic
Shubham Khatri

You probably have a problem with the this inside your ajax call. My guess would be that you have to bind this in your Repositories so that the instance of this in your ajax call refers to Repositories and not the ajax object.

3 users liked answer #2dislike answer #23
Lakston profile pic
Lakston

For those who stumble on this page now, what's missing above is .bind(this) after $.getJSON. Otherwise you can't access this within $.getJSON.

componentDidMount() {
    $.getJSON(this.props.api_url, function(json) {
        for (var i = 0; i < json.length; i++) {
            var each_repo = json[i]
            console.log(each_repo["name"]);
        }

    }).bind(this);
}
2 users liked answer #3dislike answer #32
M3RS profile pic
M3RS

My issue is similar but resolve this way

    let self = this
    this.props.users.map(function (u, x) {
        if (self.props.data[u.name]) {
            //Stuff
        }
    }

My if statement was not recognising props so used self instead

0 users liked answer #4dislike answer #40
MomasVII profile pic
MomasVII

Have you tried adding this.componentDidMount = this.componentDidMount.bind(this); to your constructor? This way you can reach this from componentDidMount.

-3 users liked answer #5dislike answer #5-3
Dan Andersson profile pic
Dan Andersson

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).