Props in React is the argument passed to React component through HTML Attribute. either String as argument or variable or object to React Component an attribute is used in HTML to pass to React Component is Called Props in React
Example
class Name extends React.Component {
render() {
return <h2>my name is {this.props.name}!</h2>;
}
}
ReactDOM.render(<Name name="yashpal" />, document.getElementById('root'));
How do pass variables in React Props?
to pass variable as an argument for React Props just use curly bracket for variable Props
Example
ReactDOM.render(<Name name={variable name} />, document.getElementById('root'));
How to object in React Props?
to pass object in React Props just use curly braket and pass object in HTML attribute
Example:
const fullname = {name: "yashpal", model: "singh"};
ReactDOM.render(<Name name={fullname} />, document.getElementById('root'));
How to use Props in Constructor?
in-class Constructor props have to be passed to super() as an argument
Syntax
class Name extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>my name is {this.props.name} </h2>;
}
}
ReactDOM.render(<Name name="yashpal"/>, document.getElementById('root'));