At this time, React is widely known as a great tool for building interactive user interfaces. Reusable components are an integral feature of React.
Each component represents a small part of the website. Often times web apps have many elements of the same nature, but with different contents. Think of product cards on an ecommerce page for example. Product titles, pictures, descriptions are different, but they fit within the same ‘frame’ and structure.
React web applications are basically component trees. The parent component at the top, and its children components.
React components need to exchange information between each other. For example, a parent component might need to pass down data received from API to its children component. There are multiple ways to do this, but props (short for properties) are the simplest solution by far.
Props in React are simply JavaScript objects that can be passed to function and class components. These components can access information stored in the props object.
Changes to props automatically triggers re-render of all components that received this prop value.
For example, you might store input value in the state, then pass it down to children. You can define an event handler so React clears input value after submit. This happens because state and props have updated, which triggers rerender.
How to use props in React
There are multiple important rules for making use of props in React. First rule is that props are immutable. A parent passes down certain props object to its child components. Child components can not change contents of that object. They can only get values from it.
Props in React can be passed down from parent to child components. This is necessary to keep things simple. All data comes from the parent component. This is called ‘single source of truth’ in React. Read up simplefrontend.com for useful insights about implementing dynamic features in React.
JSX is a templating language in React. In JSX, props look like custom attributes. For example, id is a normal attribute in HTML. You can set props the exact same way you’d set an id. Simply specify name of the prop, for example color and then set its value. It can be a normal value (number, string) or a reference to a variable that contains necessary values. Let’s look at an example:
Let’s say we have an object person:
const person = { name: ‘George’, last: ‘Smith’, occupation: ‘driver’, friends: [John, Jay, Barry]
You could pass down the reference to this object to a component. For the sake of simplicity, this might be a component that displays a list item for each person.
<Listing details={person}> </Listing>
Disadvantages of using props
Props are a great way to pass data from parent components to children. Props are passed down one level at a time. For example, if a component tree is made up of five different levels, it’s really difficult to use props to pass down values from parent to its grandchildren. React has a solution for that as well. You can use Context API to easily pass props from one component to another.
Props with map()
As you may know, you can use the map() method to dynamically create components for each item in the array. You can pass down the data from each array item to these components.