Props in react

luhan

Looking back, I remember having difficulty grasping the concept of props. As a junior developer, I worked with senior devs and saw how they write codes in a different component, and then dynamically use that component in a new component. It was so fascinating seeing them dynamically style the old component in a new component which was one of the beauties of props, but grasping the prop concept was really overwhelming for me then hence the need to write on this.

So React components are like teammates on a sports field. They work together to build your web application, but how do they share information? This is where props come in!

Props are like properties you pass to a React component. They act as arguments, providing data or custom functionality to the component.

luhan

Think of it this way: Imagine a Button component. By using props, you can tell the button its text label ("Click Me"), background color ("blue"), or even a click handler function.

Key points about Props:

Props are like instructions for the component. The component itself cannot change them.
Props are passed from parent components to their child components.
Flexible data: You can pass various data types through props, including strings, numbers, objects, or arrays.

luhan

Benefits of Props:

Components become more reusable by accepting data via props.
Props promote cleaner and more organized code.
Props allow you to create dynamic and interactive components.

tensazangetsu20

This props and states use to confuse me so much in the past. I just do trial and error, so far as e sha work.

luhan

tensazangetsu20 yeahhh, I can relate😆😆