Props in React

Props in React

In ReactJS, the props are a type of object where the value of attributes of a tag is stored. The word “props” implies “properties”, and its working functionality is quite similar to HTML attributes.

We already know that components are reusable, and we can reuse our component in our application several times. To comprehend props, you must first comprehend the components and how data moves within the components.

What are props?

In React, we utilise props to send data from one component to another (from a parent component to one or more child components). Props is a collective term for "properties." They're useful when you want your app's data flow to be dynamic.

The component props

A component is a piece of logic that has been encapsulated. Here's an example of a component that shows a Hello, World! message.

function HelloWorld() {
  return <span>Hello, World!</span>;
}

// Render
<HelloWorld />
// Output
<span>Hello, World!</span>

The inflexibility of the HelloWorld /> component is a concern. You can't alter the greeter, so instead of World, use Aman.

Here comes the props by using component props we can solve this issue.

Let's add a prop to the HelloWorld /> component to make it more customizable. The individual who has the authority to custimize the person who is being greeted. Give the new component the name Hello.

Make your component's function. take the props from the props parameter and read them:

function Hello(props) {
  return <div>Hello, {props.who}!</div>;
}

The Hello function now has a props parameter. React will make sure that all of the props you assign to the component are assigned to the props object when rendering the component.

When rendering the component, use the attribute-like syntax who="Aman" to add the prop to the component:

// Render
<Hello who="Aman" />
// Output
<div>Hello, Aman!</div>

Class component props

If you utilise class-based components, you can use this to access the props. The component instance's props property.

import { Component } from 'react';
class HelloAsClass extends Component {
  render() {
    return <div>Hello, {this.props.who}!</div>;
  }
}

A class component's prop value is set in the same way as a functional component's:

// Render
<HelloAsClass who="Aman" />
// Output
<div>Hello, Aman!</div>

Can we use Props and State Together?

Yes, absolutely! Let's look at how we can integrate state and props in our component using the following example.

import React from 'react'; 
 
class App extends React.Component { 
   constructor(props) { 
       super(props); 
       this.state = { 
           heading: "Heading from props...", 
           content: "Some Content from props..."   //Line-8 
       } 
   } 
   render() {        //Line-11 
       return ( 
           <div> 
               <Header headingProp={this.state.heading} /> 
               <Content contentProp={this.state.content} /> 
           </div> 
       ); 
   } 
} 
class Header extends React.Component { 
   render() { 
       return ( 
           <div> 
               < h1 >{this.props.headingProp}</h1> 
           </div> 
       ); 
   } 
} 
class Content extends React.Component { 
   render() { 
       return ( 
           <div> 
               < h2 >{this.props.contentProp}</h2> 
           </div> 
       ); 
   } 
} 
export default App;

We've initialised and used the state in our parent component (lines 7-8), and we've sent it down the component tree using props.

We set the props data as headerProp and contentProp utilised in child components which are Header> component and Content> component inside the render() (line number 11).

Because the single source of data is State here, if you alter the state in the parent component, all the child components are updated!

Difference of Props and State.

Props are also objects that carry information to manage the behaviour of that particular component, which sounds incredibly similar to States, but props and states are not the same. Let us distinguish between the two.

Conclusion: So there you have it, your journey into the React realm. We've started with Props in React to get you familiar with why you'd use in React and what you can do with it.