Tutorial on React this.props and options object

Posted in Tutorials

From last tutorial, we created a component that always printed “Hello World”.  This is not useful, we want it to greet people of different names.  Continuing directly from last tutorial, we change app.jsx to variablize the greeting with React’s this.props …

Instead of the word “World”, we replaced with with “this.props.name” wrapped in curly braces.  All React classes have this.props.  The “name” is an arbitrary variable we added to this object.

So that when we call createElement, we can pass in an options object with a key “name” and whatever value we want (in this case ‘Smith’).

The html page will now greet Smith…

But I could have easily have it greet “Jane” by changing the value in the options without touching the Greeting class.

 

---