title: react not receiving prop from html
body: <p>I have a react component in a file named ts.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  
  
  export default class Ts extends React.Component {
      constructor(props) {
         super(props);
         var expected = {
              lowercase:'Onlylowercase',
              snakeCase:'justSnakeCase',
              ProperCase: 'AndProperCase'
          };
          console.log("expected:",expected);
          console.log("props:",props);
          console.log("this.props",this.props);
          console.log("props.lowercase",props.lowercase);
          this.state={'lowercase':this.props.lowercase};
  
      };
  
      render() {
          return NULL;
      }
  
  }
  if (document.getElementById('ts')) {
      ReactDOM.render(&lt;Ts /&gt;, document.getElementById('ts'));
  }
  </code></pre>
  
  <p>I also have a html page from where this is called:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;My TS&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
            &lt;Ts lowercase="onlylowercase" id="ts" snakeCase="justSnakeCase" ProperCase="AndProperCase"&gt;
            &lt;/Ts&gt;
        &lt;script src="{{ asset('js/app.js') }}"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My issue is I can't get the values lowercase="onlylowercase" id="ts" snakeCase="justSnakeCase" ProperCase="AndProperCase" recognised as props in the constructor. I need to pass in some stuff from the html to populate the initial state of the component.</p>
  
  <p>When I open the HTML with Chrome console open I get:</p>
  
  <pre><code>expected: {lowercase: "Onlylowercase", snakeCase: "justSnakeCase", ProperCase: "AndProperCase"}
  props: {}
    __proto__: Object
  
  or it is this.props?: {}
    __proto__: Object
  
  props.lowercase undefined
  this.props.lowercase undefined
  undefined
  undefined
  </code></pre>
  
  <p>I am expecting props to be a javascript object with properties of lowercase, snakeCase and ProperCase, like the var expected.</p>
  
  <p>I don't think I need to use componentWillReceiveProps - as I am trying to follow the pattern describe in the documentation here:
  <a href="https://reactjs.org/docs/react-component.html#constructor" rel="nofollow noreferrer">https://reactjs.org/docs/react-component.html#constructor</a>
  and pass in props as html attributes as described here:
  <a href="https://reactjs.org/docs/components-and-props.html" rel="nofollow noreferrer">https://reactjs.org/docs/components-and-props.html</a></p>
  
  <p>I have excluded from this post the detail of the node modules and javascript includes - as the Ts component's constructor is being called which demonstrates the Ts class is "there" and my npm config is OK - it is including react and other required modules. The {{ asset() }} function is a Laravel function. The html is part of a blade template in a Laravel app.</p>
  
  <p>Can anyone see what I am doing wrongly?</p>