title: Component Mounting to validate url parameter before view rendering in ReactJs
body: <p>In my <a href="https://facebook.github.io/react/" rel="nofollow noreferrer">react</a> app, I need to validate a parameter <code>id</code> in the url and then render the view accordingly (i.e. different views in cases of successful and failed validation). Here's sample code:</p>
  
  <p><strong>routes.js</strong></p>
  
  <pre><code>// just relevant lines of code:
  import React from 'react';
  import { Route, IndexRoute } from 'react-router';
  import Foo from '../containers/foo';
  
  const AppRoutes = (
    &lt;Route component={Base} path="/"&gt;
      &lt;Route component={Foo} path="/url/:id"/&gt;
    &lt;/Route&gt;
  );
  export default AppRoutes;    
  </code></pre>
  
  <p><strong>Class Foo</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { isValid } from '../service';    
  
  class Foo extends Component {
    state = {
      check : true
    }
    componentWillMount(){
      if (isValid(this.props.params.id) == false || 'undefined') {
        console.log(isValid(this.props.params.id));
        this.setState({
          check : false
        });
      }
    }
    render() {
      if (!this.state.check){
        return(...);
      }else{
        return(...);
      }
    };
  }
  export default Foo;
  </code></pre>
  
  <p><strong>service.js</strong></p>
  
  <pre><code>"use strict";
  function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
      // XHR for Chrome/Firefox/Opera/Safari.
      xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
      // XDomainRequest for IE.
      xhr = new XDomainRequest();
      xhr.open(method, url);
    } else {
      // CORS not supported.
      xhr = null;
    }
    return xhr;
  }
  
  function fetchId(method, url, id, callback){
    var xhr = createCORSRequest(method, url);
    if (!xhr) return;
    xhr.addEventListener("readystatechange", callback);
    xhr.setRequestHeader("content-type", "application/json");
    xhr.send(JSON.stringify(query));
  }
  
  function isValid(id){
    let url = 'https://some/api/url/';
    return fetchId('POST', url, id, function(){
      return (this.readyState===4 &amp;&amp; this.responseText.length&gt;0) ? true : false;
    });
  }
  export default {isValid}
  </code></pre>
  
  <p>Now <code>console.log(isValid(this.props.params.id)</code> in <code>componentWillMount()</code> is always printing <code>undefined</code>, no matter <code>id</code> is valid or not. It seems there might be two issues, either I'm not properly returning boolean response of <code>isValid()</code> or I'm wrongly utilising <code>componentWillMount()</code>. I went thought the <a href="https://facebook.github.io/react/docs/react-component.html#componentwillmount" rel="nofollow noreferrer">docs</a> as well and came to know that <code>componentWillMount()</code> actually triggers before <code>render()</code>. </p>
  
  <p>Can somebody please point out the real issue and correct me where I'm doing wrong?</p>