What are ReactJS Props? | Methods as Props
Table of Contents
- What are Props in ReactJS?
- Test your knowledge with a quick quiz!
- Methods as Props in ReactJS
What are Props in ReactJS?
The full form of props in React is properties. Props is actually an object that is used for storing the values of tag attributes. The role of React props is to provide a path for transmission of data between components.
The working of ReactJS props is quite similar to the working of attributes in HTML. In addition, these are used as function arguments and are passed to components like it is done in functions.
An important thing to remember about props is that these are immutable, which means you can’t make changes to the props from the components. In other words, you can’t make changes to the data from the child component that has come from a parent component.
What you are allowed to do is add attributes within the components as this.props.
Test your knowledge with a quick quiz!
_____ is an object that is used for storing the values of tag attributes.
Select the correct answer
Methods as Props in ReactJS
We already know that everything in React is a component. We need to know how to pass functions to components and Props are used for this purpose. The best way to pass props is by passing methods as props.
This way, you can enable data passing from the child component to the parent. Like previously, the parent will need to pass props to the child component. However, here, the parent will be passing a reference to the method as props.
For instance, the child component has a button and when it is clicked, a method will be executed in the parent component.
The complete ParentComponent.js is shown below: