Properties [props] in Components
Properties are used to store data.
Properties can change the structure according to state and situation.
Component uses properties to change the behaviour according to state and situation.
You can re-use the component with different data.
Properties are configured in Functional Components and Class Component
Properties in Functional Components:
Functional components configure properties as “Parameter”
Parameter can be any type, object, string, number, array etc.
Syntax:
function Welcome(props)
{
return(
<>
props.PropertyName
</>
)
}Ex:
function Welcome(props)
{
return <h2> Hello, {props.name}</h2>
}
const element =<Welcome name ="Rohit" />
React.Dom.render( element , document.getElementById('root');Output:-
Hello,Rohit
Properties in Class Components:
Every JavaScript class comprises of properties.
The class properties are local and immutable.
They can initialize value, which can be access by using “this.propertyName”
They will not allow to modify the value.
React class properties are defined by using “props” which is a member of “React.Component”
“props” allows to dynamically change the value according to state and situation.
class Welcome extends React.Component {
render() {
return <h2>My Name is {this.props.name}!</h2>
}
}
const myelement = <Welcome name="Rohit" />;
ReactDOM.render(myelement, document.getElementById('root'));Output:-
My Name is Rohit