What is Props in React ?

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'));

Leave a Comment