Props (Properties) in React

Items in React Known as "Props"

Props, shortened from "properties" offer a way to transit data in React. They facilitate the transfer of information from a parent component to a child component. Picture props as inputs to a function. They customize the function’s or in this instance the component’s, result.

1. Passing Data to Components

Data gets passed to a child component with props. The child component can utilize this data to display something unique.

Real-Life Example:

Think you’re penning a letter and then you hand it to someone. Letter is comparable to the "props" you give to another being. This person is the component. He/she reads the letter. So, a reaction is based on contents.

Code Example:

function Greeting(props) {
  return 
Hello, {props.name}!
;
}

function App() {
  return ;
}

    

For illustration say function Greeting is employed. Props is the parameter. The goal is to greet a person with their name. The name or the "props.name" is used inside the <h1> tags. The component uses the name. It greets the person.

This is how the component is used. "Greeting" is the component. The name "John" is passed as the prop. It becomes "Hello, John!" in the display.

2. Default Props

There are instances where you might find the need to supply default value for props. This is in the absence of parent component sending any precise data. Default props guarantee that the component continues to function. Even if no props are sent.

Real-Life Example:

Visit a restaurant. If you don't specify water type the waiter could give default - plain water. Default props work similarly. It is a fallback value. This is when none is given. No data.

Code Example:

function Greeting(props) {
  return 
Hello, {props.name}!
;
}

Greeting.defaultProps = {
  name: 'Guest'
};

function App() {
  return ;
}

    

There is a code example. A function - Greeting with props is there. It is returning a line. It says "Hello name!". Where 'name' comes from props.

Procedure to set default props is shown. Greeting default props are defined. It's an object with key - name and value - "Guest".

After this. It's using a component. The component lacks passing of props. It's <Greeting />.

What happens in this scenario? If no name is given, component Greeting displays something. It says "Hello, Guest!". ‘Guest’ serves as default prop.

3. Prop Types and Validations

React lets you affirm the type of props you pass to a component. The aim is to assure right data transmission. This practice is of heightened importance in complex systems. It helps in preventing bugs.

Confirming a prop can be string, number, array, object. It can even be any other type.

Validity of certain props can be defined. It may render component inoperable without them.

Real-Life Example:

Consider the ordering of a pizza online. Forget selecting the size. The system may issue an error. It does this because it needs size for order completion. Similarly React can give warnings. They are issued if required props are absent. Or the wrong type of data gets dispatched.

Code Example:

import PropTypes from 'prop-types';

function Greeting(props) {
  return 
Hello, {props.name}!
;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

function App() {
  return ;
}

    

In this example:

• The name prop must be a string and is required. You must provide this value. It can't be left blank.
• Incorrect value gets passed. A number to be exact. React warns of this mistake. Make the correction before continuing.

Summary:

• Data Transference to Components: Props provide means to transference of data. This data travels from parent component to child component. Props tailor the behavior of the child component.
• Default Values for Props: Sometimes you need to set default values for props. This is required to ensure the workability of the component. It still works even in case no data is passed.
• Props Types and Confirmations: The type and presence of the props can be validated. This control ensures that correct data is passed onto components. With the help of props React components are made flexible. They can be reused with ease. It's like assigning specific tasks to different team members. Each member knows what to do based on the "props" they receive.