Introduction to React: Understanding the Basics-part.4

Props in React

Modularization in React refers to organizing your code into reusable and maintainable components. One way to achieve this is by using props.

What Are Props?

Props (short for "properties") are like function parameters in JavaScript.

They allow data to be passed from a parent component to a child component.

Props make components reusable by enabling dynamic content.

A prop is actually an object, meaning it can hold multiple values.

To use props in a component:

1. Pass props from a parent component.

2. Access props in the child component using props.attributeName.

Props cannot be modified inside the component (they are read-only).

In React, there is a special kind of prop called props.children that allows components to wrap and pass any content inside them, It is useful for creating reusable container components.
It Makes components flexible and customizable without hardcoding content inside them.

Let’s create a Wrapper component that uses props.children:

function Wrapper(props) {
  return <div className="wrapper">{props.children}</div>;
}

Inside the Wrapper, props.children refers to everything between ...
Now, we use this Wrapper component inside another component:

function App() {
  return (
    <Wrapper>
      <h1>Hello, World!</h1>
      <p>This is inside the Wrapper component.</p>
    </Wrapper>
  );
}