Sunday, May 21, 2023

How to use props in React.js? Functional and Class Component + Properties Example Tutorial

Hello guys, If you have ever worked with React.js, one of the popular JavaScript library for building UI components then you definitely know what components are. A React application is made of several components and that is why components in React are defined as the building blocks of the application. In simple terms, a component is a class or function that can accept input and return a piece of code that defines a UI. Every React component can have input. These inputs are known as props. Props stand for properties and they are optional. A component works fine without props but they are one of the most useful parts of React.


In this article, we will discuss what props are and how to use them in React. Apart from being an essential concept, this is also a popular React interview question which you should not miss to prepare. 

How to use props in React? Example Tutorial



What are props in React.js?

As mentioned above, props in React are the input provided to a component. Props are read-only data. Basically, props are objects that are passed from a parent component to a child component. Props are immutable, meaning, they cannot be modified in a component.

Props can be used in class as well as functional components. The working of props is similar in both types of components. Let’s understand how to use props in React with examples.

By the way, this is the 8th article in my series of React.js for Beginners. If you have not read earlier articles then you also check out them to learn essential React concepts like 

If you are new to React world and need resources to learn React.js in a structured and guided way then you can also check out my recommended best React courseswebsites, and books, which is a collection of many hands-on, project-based courses and books to learn to React in depth. 





1. Props in Functional Components in React

Now, let's see code examples to learn pros in functional components in React.js

See the following code.

import Child from "./child";

function Parent() {

  const name = "John";

  const age = 27;

  const city = "New York";

  return (

    <div>

      <Child />

    </div>

  );

}

export default Parent;

In the above code, the “Child” component is being rendered in the “Parent” component. Now suppose, we wish to use the variables (name, age, and city) in the “Child” component. We can do this by passing them as props to the Child component. 

Now, see the function. 

function Parent() {

  const name = "John";

  const age = 27;

  const city = "New York";

  return (

    <div>

      <Child name={name} age={age} city={city} />

    </div>

  );

}

In the “Child” component, all the variables are passed one by one. We can name the properties whatever we want.


Now let’s see how these props can be used in the “Child” component

function Child(props) {

  console.log(props);

  return <div></div>;

}

export default Child;


The following will be displayed in the console window.

{name: "John", age: 27, city: "New York"}


As mentioned earlier, the props sent from the parent component are available as objects in the child component. 

Functional and Class Component + Properties Example Tutorial


Now, let’s access the props in the “Child” component.

function Child(props) {

  return (

    <div>	

		<h2> Name: {props.name} </h2>

		<h2> Age: {props.age} </h2>

		<h2> City: {props.city} </h2>

    </div>

);

}

export default Child;

Output:

Name: John

Age: 25

City: NewYork







2. Props in class components in React.js

In class components, the props are passed in the same way as they are passed in functional components. But accessing them in the child component is a bit different. We have to create a constructor with a super() function call inside it to access the props. 

Moreover, props are accessed using the “this” keyword

The following code is equivalent to the earlier “Child” component that we created using a functional component.

import React from "react";

class Child extends React.Component {

  constructor(props) {

    super();

  }

  render() {

    return (

      <div>

        <h2> Name: {this.props.name} </h2>

        <h2> Age: {this.props.age} </h2>

        <h2> City: {this.props.city} </h2>

      </div>

    );

  }

}

export default Child;



3. Default props in React.js

React provides a very useful feature called default props. With default props, we can assign default values to the expected props. If the values are passed from the parent component, then the default values will be ignored but if not passed, then the default values will be assigned to them. 

Let's see an example in the following code.

function Parent() {

  const name = "John";

  const age = 27;

  const city = "New York";

  return (

    <div>

      <Child />

    </div>

  );

}

The “Child” component is used in the parent component but no props are passed to it. But the “Child” component is expecting them.

function Child(props) {

  console.log(props);

  return (

<div>	

		<h2> Name: {props.name} </h2>

		<h2> Age: {props.age} </h2>

		<h2> City: {props.city} </h2>

</div>

);

}

export default Child;


Output: 

Such a case will affect the component. To avoid such a situation, we should assign default props to the component.

function Child(props) {

  console.log(props);

  return (

    <div>

      <h2> Name: {props.name} </h2>

      <h2> Age: {props.age} </h2>

      <h2> City: {props.city} </h2>

    </div>

  );

}

Child.defaultProps = {

  name: "XYZ",

  age: "XYZ",

  city: "XYZ"

};

export default Child;

Using the “defaultProps” property, we can create default props. Now let’s check the output.

That's all about what is props in React.js and how to use Props in React.js. Props are a simple but important concept in React application. In this article, we have seen how to pass properties or props from parent to child components as well as how to use pros in both functional and class components in React.js.

If you are going to be a React developer, then you must understand the working of props. In this article, we discussed props in functional as well as class components. We also discuss the concept of default props. 

Other React and Web development Articles and resources you may like


Thanks for reading this article so far.  If you like this React Props tutorial then please share them with your friends and colleagues. If you have any questions or feedback, then please drop a comment.

P. S. - If you want to learn React.js from scratch and looking for free React courses to learn concepts like components, virtual DOM, etch then you should also check out these free online React.js courses for beginners. It contains free courses from Udemy and Coursera to learn React.js online for FREE. 

No comments :

Post a Comment