Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 57 additions & 30 deletions content/react/concepts/props/props.md
Original file line number Diff line number Diff line change
@@ -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:
Expand All @@ -11,95 +11,122 @@ 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

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`.

### Class-Based Components

Every component has something called `props`.
```js
class Greeting extends React.Component {
render() {
// Printing the props object
console.log(this.props);

A component’s `props` is an object. It holds information about that component.
return <h1>Hello world</h1>;
}
}
```

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:
### Function-Based Components

```jsx
render() {
```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 arent 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'));
Expand Down