Nested Route React working with a Local scoped variable?

Question

Yeah so I'm not sure why this is working but somehow it is? I'm very new to react and would just like to understand what it is I'm doing wrong or how to correct. Here's my react code snippet:

    this.state = { user_ledgers: [], paginator: { count: 0, page: 0, limit: 0 }, user: { id: this.props.match.params.user_id } };
    this.handleCreate = this.handleCreate.bind(this);
    this.handleUpdate = this.handleUpdate.bind(this);
    this.handleChangePage = this.handleChangePage.bind(this);
  }

  componentDidMount() {
    var user_id = this.state.user.id;
    this.fetchData(user_id, 1);
  }

  fetchData = (user_id, page_number) => {
    apiService.ledgersIndex(user_id, page_number)
      .then(
        paginated => {
          this.setState({
            user_ledgers: paginated.user_ledgers,
            ...........

var user_id in componentDidMount is a local scoped variable in this code if my understanding of react is correct? However, I am hitting the correct endpoint and getting back the right data from this somehow. How exactly is this working? Here is my apiservice:

function ledgersIndex(user_id, page_number) {
  const requestOptions = {
    method: 'GET',
    headers: Object.assign({},
      authorizationHeader(), 
      { 'Content_type': 'application/json' })
  };

  return fetch(`${process.env.API_SERVER}/api/v1/admin/users/${user_id}/transactions?page=${page_number}`, requestOptions)
    .then(handleResponse)
    .then(paginated => {
      return paginated;
    });
}

It's a react on rails app, the rails route is nested

namespace :admin do
        resources :users do
          resources :user_ledgers, path: :ledgers, only: [:index, :create, :show, :update]

The point of this question is really just to understand how I'm hitting the correct end point with a locally scoped var? To make it not locally scoped, how do I make it available throughout my component and apiService? I know it's working but I would like to do it correctly, and understand why it is working.

score 0 · Answer 1 · answered Mar 15 '19 at 21:59

You are right that user_id is locally scoped. But then you're passing it in to this.fetchData:

this.fetchData(user_id, 1);

This calls your fetchData method, and at the initialization of your fetchData method, it's as though there is this line happening:

var user_id = {user_id from this.fetchData call}

The same thing happens when you call apiService.ledgersIndex

Further reading: https://scotch.io/tutorials/understanding-scope-in-javascript

Thanks for the clarification and resource! – Sachin Mar 17 '19 at 19:58 — Sachin, Mar 17 '19 at 19:58

Nested Route React working with a Local scoped variable?

1 Answers1