Author: Dawid Adach

In the previous lesson, we have learned how to render our Components.

1. Passing properties within a tag

Alright now let's take this to the next level. instead of hard-coding text, I want to display values dynamically. You might notice that so far we were rendering an empty tag <Event /> (note the slash at the end):

JSX allows us to pass the value to our components as below:

            <Event>Meeting with John </Event>
and access it using props:

            <h3>10:00 - {this.props.children}</h3>

Great that works, but actually what does "props" even mean? 

To get the jargon out of the way, “props” is short for “properties” so nothing particularly fancy there.

2. Passing properties using tag attributes

What if we want to pass a more complex structure to our component, not only a short string? React makes it very easy. Instead of passing a value in between tags, we will pass them as tag attributes, like this:

            <Event  title="Meeting with John" time="10:00" />
And access it in our component like that:

            <h3>{this.props.time} - {this.props.title}</h3>

3. Curly braces 

As you noticed, I am using curly braces. Whenever we want to render something dynamically in React, in order to do that we add curly braces. In between these curly braces we can add
any valid JavaScript expressions. This includes any arithmetic operations like      

            <p>Result: {2 + 2}</p>
Which will render 4 or work with variables like 

            <p>Result: { + 10}</p>
Which will render 11.  If you want to render today's date I could call {} which will print the current date in milliseconds

            <p>Result: {}</p>


Now you know how to use props to pass different values between components. However, before we move one.... there is one thing you must know about props.

Imagine that we want to change the subject of our item. Intuitively we would try to update the value of title property using JS. Let's try to do that - add a button: 

                    <h3>{this.props.time} - {this.props.title}</h3>
                    <button>Change my title</button>

Now bind the change of the title to the button click: 

            <button onClick={(this.props.title = "New Title")}>Change my title</button>

As soon as you save the file, you will see an error in the browser similar to the one below:

This is because props by default are read-only, or as we often call it — immutable. That means that once they are set, they can't be overwritten

You probably wonder how you can solve that issue since we can't overwrite the value. React developers predicted this and created so-called state which we will learn about in the next lesson. 

Previous lesson Download Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding & in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...