ReactJS Props Reference
In React, components can receive information from a parent component by utilizing props (short for properties). A prop is an object accessible to all React components. It serves as a means to pass data from a parent component to a child component.
<Welcome fullName = "Ashish Bhardwaj" />
In the provided code, the prop `fullName` is passed with the value “Ashish Bhardwaj” to the `Welcome` component, and accessing this prop is demonstrated succinctly.
props = { fullName: "Ashish Bhardwaj" }
In case of functional components, we can access a prop value as shown below.
props.propName;
Example: Below is the basic implementation of the React Props.
Javascript
//index.js import React from "react" ; import ReactDOM from "react-dom" ; import App from "./App" ; ReactDOM.render( <React.StrictMode> <App fullName={ "Ashish Bhardwaj" } /> </React.StrictMode>, document.getElementById( "root" ) ); |
Javascript
//App.js import React from "react" ; function App(props) { return ( <div style={{ color: "green" , textAlign: "center" }}> <h1 style={{ color: "red" , }}>Hello {props.fullName}</h1> <h2>App to w3wiki</h2> </div> ); } export default App; |
Output:
React JS Props Reference:
Props Reference |
Description |
---|---|
We know that everything in ReactJS is a component and to pass in data to these components, props are used. |
|
PropTypes help in specifying the expected data types of the props (properties) that a component should receive during its use. |
|
React allows us to pass information to a Component using something called props |
|
We will learn about some more advanced concepts about props in this article |
|
Unidirectional data flow is a technique that is mainly found in functional reactive programming. |
|
The state in React is an instance of the React Component Class that can be defined as an object of a set of observable properties that control the behavior of the component. |
|
States and props are two of the most important concepts of React and everything in React is based upon them. |
|
lifecycle methods are used to control the components at different stages from initialization till unmounting. |
Contact Us