We created our first React component in the previous article, and now, it's time to move forward and create some props to work with data. But before that, we will dive a little deeper into JSX so you can use it effectively in your React pages.
Exploring JSX
JSX stands for JavaScript XML. It is a syntax extension that enables you to write HTML-like code inside JavaScript code. It is transformed into regular JS function calls after rendering. One of the most powerful features of JSX is that it can embed JS expressions with curly braces {}.
Basic JSX Rules
Although JSX looks like HTML, there are some ground rules that you must follow while writing it:
- A react component created with JSX must return a single root element. In order to return multiple elements, they must be enclosed within a parent element like a <div> or a <> fragment.
- Wrap your multiline JSX into parentheses, which is considered a good practice for avoiding parsing errors.
- Always use camel case for HTML elements like onClick rather than onclick and className instead of class.
- Always close the elements that do not have content with a forward slash at the end.
Keep the aforementioned rules in mind whenever working with the React components. Now that you know the JSX rules, let's dive deep into the props and explore them.
Getting Started with Props
In the previous article, we learned how to create and render React components. Although it is a good start with React, real-world applications require dynamic data and reusable UI components. The props help us achieve that.
Props are short for properties. It is the process of passing the data from the parent to child components. You can think of it as the arguments passed to a function. In React, these props are read-only for child components, meaning they can access the data but cannot change it directly. This unidirectional flow is at the core of React, which makes an application more manageable and understandable. With the help of props, we can build highly dynamic and reusable components that change themselves according to the data received.
Passing Data As Props
Let's learn how to use props to pass data between components. We'll make some changes to our previous component and create a reusable "greetings" component that displays different names and ages for different visitors. To achieve that, first, create a new file named "greetings.js" in your src folder:
Now, add the following code to it:
function Greetings(props) {
return (
<h1>Hello, {props.user_name}! Your age is {props.user_age} years.</h1>
);
}
export default Greetings;
In the above code,
- Greetings() is a functional component with a single parameter.
- props is an object that contains all the data passed down to the child component.
- props.name, props.age are the values received from the parent.
Now, to use this component, go back to the App.js file and call the greetings component with some static data:
import React from 'react';
import Greetings from './greetings';
function App() {
return (
<div>
<h1>Welcome!</h1>
<Greetings user_name="Sachin" user_age="25" />
<Greetings user_name="Rajesh" user_age="30" />
</div>
);
}
export default App;
In the above code, we first imported the greetings component from the greetings folder. Then, we used the <greetings /> tag, just like HTML, to call the greetings component. We also passed the values using the attributes as an argument to the greetings function. These attributes become the props object of the greetings component. We did the same thing for the other values. When you render this component, you will see two separate messages for each prop appearing on the screen.
Rendering Dynamic Props
Without rendering the dynamic data with props, their purpose remains unfulfilled. Although using static props helps us achieve the reusable components, we cannot always define the static data for them. Therefore, let's make our props dynamic in App.js:
import React from 'react';
import Greetings from './greetings';
function App() {
const userName = "Sachin";
const userAge = "25";
return (
<div>
<Greetings user_name={userName} user_age={userAge} />
</div>
);
}
export default App;
Here is the result after updating App.js:
In this version, we declared 2 constant variables and passed the values to the component dynamically using the curly braces {} instead of static strings. If we want to change the values, we will do it via the variables, and the changes will automatically be reflected in the output. This shows that props enable dynamic dataflow between components. Any changes made to the parent will automatically trigger changes in the child component without needing to make changes manually. This ensures that the UI stays consistent with the underlying data. This dynamic dataflow is necessary to build data-driven React applications.
Using props for Styling
The props are not limited to text or numbers and can accept Boolean values, objects or any other JavaScript value. This makes the dynamic styling possible. Let's use the color prop for the Greetings component to change the text color dynamically:
In greetings.js, paste the following code:
function Greetings(props) {
const greetingColor = {
color: props.color
};
return (
<h1 style={greetingColor}>Hello, {props.user_name}</h1>
);
}
export default Greetings;
In App.js:
import React from 'react';
import Greetings from './greetings';
function App() {
const userName = "Sachin";
const color = "red";
return (
<div>
<Greetings user_name={userName} color={color} />
</div>
);
}
export default App;
In the above code, the App component has passed the color "red" to the greetings component. In the Greetings component, we have declared an inline style object named greetingColor with the props.color received from the parent. Here is the output of the above components:
Props are Read-Only
Always remember that the child component should never make any changes to the received props. The props are designed to send the data downwards from parent to child, and attempting to change them within the child component would not work and go against React's fundamental principle of unidirectional data flow.
Destructuring Props
As your application grows and components receive more and more props, it can become difficult to access them using the props.propertyName. So, to resolve this problem, we destructure the props and declare the properties directly within the function declaration of your functional components as follows:
function Greetings({user_name,color}) {
const greetingColor = {
color: color
};
return (
<h1 style={greetingColor}>Hello, {user_name}</h1>
);
}
export default Greetings;
In this lesson, you have learned to use props to send data from parent to child components statically and dynamically. We also covered applying styling on the components with the props. In the next article, we will explore States and learn how to make components interactive.
