A prop is any input that you pass to a React component. Props are given as an object and are the first argument to a component function, like this:
function Greeting(props) {
return <h1>Hello {props.name}</h1>
}
function App() {
return <Greeting name={"Ali"} />;
}
export default App;Notice the syntax to pass a prop to a component. The prop name is the attribute name, and the prop value is the attribute value. In this example, we pass the name prop with the value "Ali" to the Greeting component. You can pass any number of props to a component. All the props are aggregated into a single object and passed as the first argument to the component function.
You can use object destructuring syntax to extract the properties from the props object:
function Greeting(props) {
const { name } = props;
return <h1>Hello {name}</h1>
}Alternatively, you can destructure the properties directly in the function signature:
function Greeting({ name }) {
return <h1>Hello {name}</h1>
} Aside: In class components, props are passed to the class constructor.
import React, { Component } from "react";
class Greeting extends Component {
constructor(props) {
super(props);
}
render() {
return <h1>Hello {this.props.name}</h1>
}
}
export default Greeting;Props are Read-Only: You should never modify the props object directly. React components are meant to be pure functions that do not modify their inputs. If you need to change the value of a prop, you should do so in the parent component and pass the new value down as a new prop. Treat props as read-only.
Here is a contrived example of how you might try to modify a prop:
function DisplayAccountBalance(props) {
const { account, amount } = props;
account.total -= amount;
return <p>Account balance: {account.total}</p>
}This is anti-pattern and should be avoided. Instead, you should create a new prop in the parent component and pass it down:
function DisplayAccountBalance(props) {
const { account } = props;
return <p>Account balance: {account.total}</p>
}
function App() {
const account = { total: 1000 };
const amount = 100;
account.total -= amount;
return <DisplayAccountBalance account={account} />;
}React aggregates all the props into a single object. This makes it easy to pass many props to a component, but it can also make it easy to pass the wrong props or forget to pass required props. If you use TypeScript, you can use interfaces (or types) to define the shape of the props object. If you use JavaScript, you can use the prop-types library to document and type-check the props.
If you are using TypeScript, you can define an interface to describe the shape of the props object:
interface GreetingProps {
name: string;
}
function Greeting(props: GreetingProps) {
return <h1>Hello {props.name}</h1>
}
function App() {
return <Greeting name={"Ali"} />;
}
export default App;TypeScript will check that the props passed to the Greeting component match the GreetingProps interface.
If you are using JavaScript, you can use the prop-types library to document and type-check the props.
First, install it:
npm install prop-typesThen, import and use it:
import PropTypes from "prop-types";
function Greeting(props) {
const { name } = props;
return <h1>Hello {name}</h1>
}
Greeting.propTypes = {
name: PropTypes.string.isRequired
};
function App() {
return <Greeting name={"Ali"} />;
}
export default App;Notice that we attached the propTypes object to the Greeting function. This object defines the types of the props that the component expects. In the propTypes object, we define the name prop as a required string. If the name prop is not passed or is not a string, React will log a warning in the console.