Tutorial on React this.props and options object

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

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 …

react 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…

hello smith

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