ReactJS Props Reference
Last Updated :
06 Dec, 2023
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
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
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 GeeksforGeeks</h2>
</div>
);
}
export default App;
|
Output:
Output
React JS Props Reference:
React JS Methods as Props
|
We know that everything in ReactJS is a component and to pass in data to these components, props are used.
|
React JS PropTypes
|
PropTypes help in specifying the expected data types of the props (properties) that a component should receive during its use.
|
React JS Props – Set 1
|
React allows us to pass information to a Component using something called props
|
React JS Props – Set 2
|
We will learn about some more advanced concepts about props in this article
|
Unidirectional Data Flow
|
Unidirectional data flow is a technique that is mainly found in functional reactive programming.
|
React JS State in React
|
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.
|
React JS State vs props
|
States and props are two of the most important concepts of React and everything in React is based upon them.
|
React JS Implementing State & Lifecycle
|
lifecycle methods are used to control the components at different stages from initialization till unmounting.
|
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...