React: Props - Update from class to function based components #4788 (#5911)

* React: Props - Update from class to function based components #4788

* React: Props - Update from class to function based components #4788

* Update props.md

minor fixes

* prettier formating and fixing the indenation

---------

Author: thedarkking01

content/react/concepts/props/props.md

@@ -1,6 +1,6 @@
 ---
 Title: 'Props'
-Description: 'In React, components are able to use props, or "properties", to display and share data throughout the application. In other words, props is the information that gets passed from one component to another. Parent components can pass props to their child components, but not the other way around. Props can be many data types, including: - Numbers - Strings - Functions - Objects jsx'
+Description: 'In React, props are read-only data passed from parent to child components, enabling communication and behavior customization through values and functions.'
 Subjects:
   - 'Web Development'
 Tags:
@@ -11,95 +11,125 @@ CatalogContent:
   - 'paths/front-end-engineer-career-path'
 ---
 
-In React, components are able to use props, or "properties", to display and share data throughout the application. In other words, props is the information that gets passed from one component to another.
+In React, components use **props** (short for "properties") to share and display data throughout the application. Props are passed from parent to child components only and cannot flow in the reverse direction.
 
-Parent components can pass props to their child components, but not the other way around. Props can be many data types, including:
+With functional components, props are handled as parameters in the function definition, making the code simpler and more intuitive.
+
+Props can be various data types, including:
 
 - Numbers
 - Strings
 - Functions
 - Objects
+- Booleans
+- Arrays
 
 ## Syntax
 
-```jsx
+```pseudo
 import React from 'react';
 
-class ParentComponent extends React.Component {
-  render() {
-    return <ChildComponent prop1="Mike" prop2="piza">
-  }
+function ParentComponent() {
+  return <ChildComponent prop1="Mike" prop2="pizza" />;
 }
 
 function ChildComponent(props) {
-  return <h2>This is prop1: {props.prop1}. This is prop2: {props.prop2}.</h2>
+  return <h2>This is prop1: {props.prop1}. This is prop2: {props.prop2}.</h2>;
 }
+
+export default ParentComponent;
 ```
 
-## `this.props`
+## `Props` in Functional Components
 
-Every component has something called `props`.
+In functional components, props are received directly as an argument, making them simpler and more intuitive compared to class-based components, which use `this.props`.
 
-A component’s `props` is an object. It holds information about that component.
+### Class-Based Components
 
-To see a component’s `props` object, you use the expression `this.props`. Here’s an example of `this.props` being used inside of a render method:
+```js
+class Greeting extends React.Component {
+  render() {
+    // Printing the props object
+    console.log(this.props);
+
+    return <h1>Hello world</h1>;
+  }
+}
+```
 
-```jsx
-render() {
+### Function-Based Components
+
+```js
+function Greeting(props) {
+function Greeting(props) {
   // Printing the props object
-  console.log(this.props);
+  console.log(props);
 
   return <h1>Hello world</h1>;
 }
 ```
 
 ## Pass `props` to a Component
 
-You can pass information to a React component. How? By giving that component an attribute:
+Information can be passed to a React component by giving it an attribute:
 
 ```js
 <MyComponent foo="bar" />
 ```
 
-Let’s say that you want to pass a component the message, `"This is some top secret info."`. Here’s how you could do it:
+For example, to pass a message, `"This is some top secret info."`, it can be done like this:
 
 ```js
 <Example message="This is some top secret info." />
 ```
 
-As you can see, to pass information to a component, you need a name for the information that you want to pass.
+To pass information to a component, a name is assigned to the information that is being passed.
 
-In the above example, we used the name `message`. You can use any name you want.
+In the above example, the name `message` is used, but any name can be chosen.
 
-If you want to pass information that isn’t a string, then wrap that information in curly braces. Here’s how you would pass an array:
+For non-string information, wrap the data in curly braces. Here’s how an array can be passed:
 
 ```js
 <Greeting myInfo={['top', 'secret', 'lol']} />
 ```
 
-In this next example, we pass several pieces of information to `<Greeting />`. The values that aren’t strings are wrapped in curly braces:
+In this next example, several pieces of information are passed to `<Greeting />`, with values that aren't strings wrapped in curly braces:
 
 ```js
 <Greeting name="Frarthur" town="Flundon" age={2} haunted={false} />
 ```
 
+In functional components, props are directly received as an argument to the component function.
+
+```js
+function Greeting({ name, town, age, haunted }) {
+  return (
+    <div>
+      <h1>
+        Hello, {name} from {town}!
+      </h1>
+      <p>Age: {age}</p>
+      <p>Haunted: {haunted ? 'Yes' : 'No'}</p>
+    </div>
+  );
+}
+```
+
 ## Displaying the Props
 
-You will often want a component to display the information that you pass.
+A component often needs to display the information that is passed to it.
 
-Here’s how to make a component display passed-in information:
+To make a component display passed-in information:
 
-1. Find the component class that is going to receive that information.
-2. Include `this.props.name-of-information` in that component class’s render method’s `return` statement.
+1. Identify the component that will receive the information.
+2. Access the prop directly in the function's parameter and use it inside the JSX.
 
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-class Greeting extends React.Component {
-  render() {
-    return <h1>Hi there, {this.props.firstName}!</h1>;
-  }
+function Greeting({ firstName }) {
+  return <h1>Hi there, {firstName}!</h1>;
 }
 
 ReactDOM.render(<Greeting firstName="Rybu" />, document.getElementById('app'));