JavaScript tutorial on Web Development

How to use Props and Child in ReactJS

Part 2: Learn how to pass props in a React App

In our last tutorial, we studied the functional component. We learned how to create functional components and how JSX works inside of it. Today, we are going to learn about props. You will use props a lot in ReactJS and it is necessary to understand what they are and how they work.

Create a new app by typing the following command in the terminal.

$ npx create-react-app props-example
$ cd props-example

Create a new folder in the src and name it ‘components’. The whole point of React is to make it easier for us to create the front-end of the websites. We divide the whole structure of a website into components and those components are responsible for fetching data, showing it to the user. Everything in a React app is about components. Therefore, we have a whole folder dedicated to our components, we can add and delete components directly from this folder.

$ mkdir src/components
$ cd components
$ touch Greet.js

Add the following code in the Greet.js file.

Greet.js

What we did so far is we created a components folder and in this folder, we created a Greet.js file. Greet is a functional component, the first letter of the component has to be a capital letter. This is a pretty simple component.

line 1: we are importing the React.

line 3: declared a functional component named Greet

line 4: created a const variable ‘name’ and stored ‘Kim’ in it.

line 5–10: the function just returning the <p> tag with ‘hey {name}’. The value of the name variable will be assigned here.

App.js

Now delete the src/App.js file in the folder and add the following code to it.

Inside of our return statement, we have put our Greet component. Now, you can see how pieces are fit together to make it a full app. You should see output like this after you run the server with the following command

$ npm start

output on localhost:3000

Props

The program worked because we provided a hardcoded name field inside the Greet function. What would happen when we don’t know what inside of the name variable? Maybe it's coming from an API. How will we show it then? With the help of Props.

Props are passed as an object. Here, we are passing props ( called properties ) as an argument to our Greet function. And in the return statement, inside the p tag, the name field passing through a prop.

change code to your App.js

at localhost:3000

We can pass any value to the name filed in App.js and that will be passed to the Greet component through a prop.

TIP:

Single braces must surround JavaScript expressions.

ES6 New Syntax ( destructuring )

You can see functional components can be written like this:

you will get the same output.

Tip 2:

In React, data flows only one way (unline Angular). From parent to child.

Children in ReactJS

To understand children, let’s see what they are.

In this example, Fruits has two children ( Apple and Oranges), Apple has 2 children ( 2 h1 tags) and Oranges has none children.

What if want to convey more than just passing name argument? What if we have a p tag too, who would we display that? With the use of props.children property.

App.js

Greet.js

localhost:3000

What have we learned so far?

In this tutorial, we studied how to use props in Reactjs and how children can be used to move data around. This should be enough for today’s tutorial, in the next tutorial, we will study states in React. Till then, Bye :)

By,

Saranjeet Singh

You can find more tutorials about programming on my YouTube channel,Tech with Saran, https://www.youtube.com/channel/UCOHJCOprtOf4caI50lJlHSQ

Photo by Jeremy Bishop on Unsplash