In this tutorial, we will see what props are in React JS. A well-liked JavaScript package called React JS is used to create user interfaces, especially for single-page apps that need to be quick and engaging. Utilizing components is one of React's fundamental ideas. A React application's components are its building blocks; they let you divide the user interface into modular, self-contained sections.
Table Content
1. What are Props?
2. How Props Work
3. Key Characteristics of Props
4. Using Props in Functional Components
5. Using Props in Class Components
6. Default Props
7. PropTypes
8. Passing Props
9. Passing Functions as Props
10. Conclusion:
1. What are Props?
The "props" (short for "properties") mechanism in React allows data to be sent between components. Props are bits of data sent from a parent component to a child component that can only be read. They give you the ability to alter a component's look and behavior, increasing its adaptability and reusability.
2. How Props Work
Similar to how arguments are supplied to functions, props are passed to components. Here's a little example to help you understand this concept:
import React from "react";
import ReactDom from 'react-dom';
function Country(props) {
  return <h1>Hello, {props.name}</h1>;
}
ReactDom.render(
<>
  <Country name="United States" />;
</>,document.getElementById('root'));
Output:
Hello, United StatesIn this example:
- The Country component takes a props object as its argument.
- The Country component uses the name property from props to render a print message.
- The ReactDom.render() component passes the name prop to the Country component when it is rendered.
3. Key Characteristics of Props
Immutability: Props are immutable, which means that the child component that receives them cannot alter them. This guarantees that information moves from parent to child in a unidirectional method.
Read-Only: Props are read-only because they cannot be changed. The values cannot be changed by the child component; it can only read them.
Unidirectional Data Flow: Props impose a one-way data flow, which transfers information from the parent to the child. This facilitates reasoning regarding the application's current state.
4. Using Props in Functional Components
Simpler parts expressed as functions are known as functional components. They return React items after receiving props as an argument.
Here’s an example:
import React from "react";
import ReactDom from 'react-dom';
function Welcome(props) {
  return <h1>Welcome, {props.username}!</h1>;
}
ReactDom.render(
<>
  <Welcome username="John" />;
</>,document.getElementById('root'));
Output:
Welcome, John!
5. Using Props in Class Components
Class components can have their state and have extra features. Although they do it a little differently, they also employ props:
import React from "react";
import ReactDom from 'react-dom';
class Welcome extends React.Component {
  render() {
   return <h1>Welcome, {this.props.username}!</h1>;
}
}
Â
ReactDom.render(
<>
  <Welcome username="John" />;
</>,document.getElementById('root'));
Output:
Welcome, John!
6. Default Props
Occasionally, you may wish to supply default values for props if they are not passed. With the defaultProps property in React, you can define default props:
In this example, if the name prop is not provided, it defaults to "United States".
import React from "react";
import ReactDom from 'react-dom';
function Country(props) {
  return <h1>Hello, {props.name}!</h1>;
}
Country.defaultProps = {
  name: 'United States'
};
Â
ReactDom.render(
<>
  <Country/>;
</>,document.getElementById('root'));Output:
Hello, United States!
7. PropTypes
React has a system called PropTypes that makes sure components get the proper kind of props. PropTypes allow you to tell a component what kind and form of props it should expect:
import React from "react";
import ReactDom from 'react-dom';
import PropTypes from 'prop-types';
function Country(props) {
  return <h1>Hello, {props.name}!</h1>;
}
Country.propTypes = {
  name: PropTypes.string
};
ReactDom.render(
<>
  <Country name="Canada" />
</>,document.getElementById('root'));Output:
Hello, Canada!If the name prop is not a string, React will log a warning in the console.
8. Passing Props
Props are attributes that can be transferred from a parent component to a child component. A variety of data types, such as strings, numbers, objects, arrays, and functions, can be passed as props. Here are a few instances:
In this example, the User component receives a string (name), a number (age), and an array (hobbies) as props.
import React from "react";
import ReactDom from 'react-dom';
function User(props) {
  return (
   <div>
    <p>Name: {props.name}</p>
    <p>Age: {props.age}</p>
    <p>Hobbies: {props.hobbies.join(', ')}</p>
   </div>
);
}
ReactDom.render(
<>
  <User
    name="John"
    age={30}
    hobbies={['Reading', 'Traveling', 'Cooking']}
  />
</>,document.getElementById('root'));
Output:
Name:Â John
Age:Â 30
Hobbies:Â Reading, Traveling, Cooking
9. Passing Functions as Props
Functions can also be passed as props, allowing child components to communicate with parent components:
In this example, the Button component receives a function (handleClick) as a prop and calls it when the button is clicked.
import React from "react";
import ReactDom from 'react-dom';
function Button(props) {
  return <button onClick={props.handleClick}>Click me</button>;
}
function showAlert() {
  alert('Button clicked!');
}
ReactDom.render(
<>
  <Button handleClick={showAlert} />
</>,document.getElementById('root'));
10. Conclusion:
React's core concept of props enables components to be reusable and dynamic. Props aid in the upkeep of a neat and organized code structure by transferring data from parent to child components. Proficiency in prop usage is crucial for constructing resilient and upgradable React apps. Props can be used effectively to design adaptable components that change depending on the context and data input.
0 Comments