Lesson 4 - Props

4.1 - Props

Props are a powerful feature in React that allow you to share data across your application’s components. They serve as a dynamic conduit, enabling seamless information flow from one component to another and bringing your application to life.

Props are read-only data that are passed from a parent component to a child component. They allow you to customize the child component with different data inputs. This makes the component reusable, allowing them to receive data dynamically.

The following example illustrates the Props:

import React from 'react';

function Greet(props) {
 return <h2>Welcome back! { props.name }</h2>;
}

function App() {
 return (
 <>
 <Greet name="John Doe"/>
 </>
 );
}

In the example above, we declared a function Greet that takes a name as Props. This is our child component.

In our parent component, we included the child component as a self-closing tag and provided the properties name as John Doe.

Similarly, you can pass multiple properties to Props as follows:

import React from 'react';

function Greet(props) {
 return <h2>Good {props.time}! { props.name }</h2>;
}

function App() {
 return (
 <>
 <Greet name="John Doe" time="Evening"/>
 </>
 );
}

This works similarly to our previous example but takes two properties name and time as Props.