Accessing this.props in react ComponentDidMount

Question

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.

Answer 1

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.

Answer 2

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