Breaking News: Grepper is joining You.com. Read the official announcement!

this.props Recap in React Class components

M Hassan khan answered on December 25, 2022 Popularity 4/10 Helpfulness 1/10

answer this.props Recap in React Class components

this.props Recap in React Class components

Comment

Access a Component's props:

Every component has something called props. Notice instead of getting
props via parameters and state via useState we are getting these from
instance variables this.state and this.props. This is how it works
with class components.

this.props comes from the parent component, similar to 
parameter given to the render functions that we pull props out of.


A component’s props is an object. It holds information about that component.

To see a component’s props object, you use the expression this.props.


You can pass information to a React component.How? 
  By giving that component an attribute:

e.g

<MyComponent foo="bar" /> --> foo is an attribute
  
  

You can do more with props than just display them. You can also use props 
to make decisions.

You can, and often will, pass functions as props. It is especially common to 
pass event handler functions.

How do you define an event handler in React?:


You define an event handler as a method on the component class, 
just like the render method.

Remember, do NOT separate event handler function and render with a comma. 

One major source of confusion is the fact that names like onClick have special meaning, but only if they’re used on 
HTML-like elements.


// The attribute name onClick
// creates an event listner:
<button onClick={this.props.onClick}>
  Click me!
</button>

----------VS-------------------

// The attribute name onClick
// is just a normal attribute name:
<Button onClick={this.handleClick} />
  
  ------REASON-----------
  
  The reason for this is that <Button /> is not an HTML-like JSX 
  element; it’s a component instance.

Names like onClick only create event listeners if they’re used on 
HTML-like JSX elements. Otherwise, they’re just ordinary prop names.
  
  The defaultProps property should be equal to an object:

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}
 
// How to set defaultProps ???
We also set defaultProps in the case that someone uses this 
component without providing it with props. 

You can make this happen by giving your component class a property 
named defaultProps:
Example.defaultProps = {}; --> it should be equal to an object

Inside of this object, write properties for any default props 
that you’d like to set:

-->> Sample Code

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}
// equals to an object:
Example.defaultProps = { text: 'yo' };


-------------------------------------------------------

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: class components javascript

Link to this answer
Share Copy Link

Contributed on Dec 25 2022

M Hassan khan

0 Answers Avg Quality 2/10

this.props Recap in React Class components

Contents

More Related Answers

this.props Recap in React Class components

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.