Passing Data into Components

It is very useful to be able to pass data into the components. The syntax of passing data into a component is similar to the syntax for assigning attributes in HTML.

Consider, for example, we have a component called Main, and we want to pass a string called "Hello World" into it. We can do so using the following code:

The above component will create a <h1> element with the "Hello World" text inside it. Notice that we use the term text as the attribute name, therefore, when accessing the value from inside the component, we refer to the text attribute of the props object: props.text. The name text was an arbitrary choice, in fact, we can name it anything we like, for example:

In this case, we will use the term headingContent to access the value that has been passed:

We can also pass multiple strings into a single component:

In this case, the method for accessing the values passed will be the same:

To simplify the above code, we can just pass a single array that contains all the strings:

We can pass values of any data type ranging from integers to complex objects! It is important to note that when passing raw integer values, we need to enclose them in braces: