react not receiving prop from html

Question

I have a react component in a file named ts.js:

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(<Ts />, document.getElementById('ts'));
}

I also have a html page from where this is called:

<html>
    <head>
        <title>My TS</title>
    </head>
    <body>
          <Ts lowercase="onlylowercase" id="ts" snakeCase="justSnakeCase" ProperCase="AndProperCase">
          </Ts>
      <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

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.

When I open the HTML with Chrome console open I get:

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

I am expecting props to be a javascript object with properties of lowercase, snakeCase and ProperCase, like the var expected.

I don't think I need to use componentWillReceiveProps - as I am trying to follow the pattern describe in the documentation here: https://reactjs.org/docs/react-component.html#constructor and pass in props as html attributes as described here: https://reactjs.org/docs/components-and-props.html

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.

Can anyone see what I am doing wrongly?

not a react user, console.log on props and this.props its giving you an object. and then you are trying to convert that object to lowercase! — Leo, Jan 14 '18 at 01:25
I am expecting props to be an object containing properties of lowercase, snakeCase and ProperCase. Instead it is an empty object, containing only the prototype stuff that all objects contain. I have updated the post above with your feedback, thanks. — NULL pointer, Jan 14 '18 at 01:47
See my answer for injecting props in a React component here: https://stackoverflow.com/a/54158247/579890 — Dany Dhondt, Jan 12 '19 at 09:33

Giang Le · Accepted Answer · 2018-01-15T01:46:50.313

2

Your syntax is wrong. React doesn't creat a new html tag like "". You only can use tag in react component. So the right syntax is in html replace

<Ts lowercase="onlylowercase" id="ts" snakeCase="justSnakeCase" ProperCase="AndProperCase">
          </Ts>

To <div id="ts"></div> and go add to before

<script>
   var lowercase="whatever";
   var snakeCase="snakeCase";
   ...
</script>

And change to

if (document.getElementById('ts')) {
    ReactDOM.render(<Ts lowercase={lowercase} snakeCase={snakeCase} />, document.getElementById('ts'));
}

ReactDOM will find a dom with id is "ts" and replace it by your ts component.

edited Jan 15 '18 at 01:46

answered Jan 14 '18 at 02:06

Giang Le

6,446
4
23
26

Thanks for your contribution Giang Le, but this technique is difficult becuase: My Ts.js file defines the React component, and contains the RectDOM.render function. I use Mix (a wrapper around WebPack) to include Ts.js file into the final 'app.js' file - and I need to re-run my npm script every time is changes. Hence I can't put "run-time" values in that file. If I move the eactDom.render(....) code into a script tag in my HTML file, I get ReactDOM undefined, even if it is AFTER – NULL pointer Jan 14 '18 at 23:32
Yeah. I had a solution for u. In html file (blade tenplate) you define variable lowercase... and in ts conponent you call – Giang Le Jan 14 '18 at 23:37
Good morning to you also! If my – NULL pointer Jan 15 '18 at 00:07
I just updated my answer. If you want change "lowercase", "snakecase" just change in html file. Doen't need run webpack again – Giang Le Jan 15 '18 at 01:49
Thanks Giang - your suggestion worked for me. I added a – NULL pointer Jan 15 '18 at 19:07

react not receiving prop from html

1 Answers1