Passing Data Through Props
Explore how to pass data through props in React to create flexible, reusable components. Understand the importance of pure functions in React and learn why props should not be modified within components to ensure predictable behavior and efficient rendering.
We'll cover the following...
Props
Props in React refer to the properties or input that can be passed into a component. React can render dynamic data. One of the ways it does so is by passing props.
Let’s see an example below:
import React from "react";
const Greeting = () => {
return <div>
<h1>Good morning Ikenna!</h1>
</div>
}
export default Greeting;The widget above is a simple React application that consists of two components. These are the App component, which is the parent component, and another component called Greeting, which is the child of the App component.
The Greeting component renders an h1 tag with a good morning message to a person named Ikenna. When we click the “Run” button, an h1 tag is displayed with the phrase Good Morning Ikenna. This component has just one task, which is to greet a person.
The ...