- Learn ReactJS Tutorial
- React Introduction
- Why learn ReactJS?
- React create-react-app
- React Features
- Pros and Cons of ReactJS
- React JSX
- React Components
- React State
- React Props
- React Props Validation
- State Vs. Props
- What is Constructor?
- React Component API
- React Component Life-Cycle
- React Forms
- React Events
- React Conditional Rendering
- React Lists
- React Refs
- React Fragments
- React Router
- React CSS
- React Animation
Props stand for “Properties.” They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from one component to other components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function.
Props are immutable so we cannot modify the props from inside the component. Inside the components, we can add attributes called props. These attributes are available in the component as this.props and can be used to render dynamic data in our render method.
When you need immutable data in the component, you have to add props to reactDom.render() method in the main.js file of your ReactJS project and used it inside the component in which you need. It can be explained in the below example.
Default Props
It is not necessary to always add props in the reactDom.render() element. You can also set default props directly on the component constructor.
State and Props
It is possible to combine both state and props in your app. You can set the state in the parent component and pass it in the child component using props.