# Props

# What is props?

* `props` stands for properties.
    
* Props are arguments passed into React components.
    
* Props are passed to components via HTML attributes.
    

Send props in `index.js` file and use in our component file,React Props are like function arguments in JavaScript *and* attributes in HTML.

***Ex:- pass props***

```javascript
<App name="Megha" /> //name prop passed.
```

## Pass variable as a props

if you have a variable to send . you just put the variable name inside curly brackets.

```javascript
let a="Megha Khatri";
<App name={a} />  //pass variable in props
```

## Props used in function component

* In function component props behave like a object.and we can call props properties.
    
* we can write some other name place or props ,props is not neccessery.
    
* we are not declare props in function component directly. if you can they show error.
    
    * if you call props,you just put the variable name inside the curly brackets like `{props.name}` .
        
        ```javascript
        function App(props) {
          return <h2>hey { props.name }!</h2>;
        }
        ```
        
        ## Children props
        
    * props can be used as **children props**.
        
    
    ***Ex:- we can write children props in*** `index.js` file and call into in component `App.js` file
    

```javascript
//index.js file
<User>
  <p>1st element</p>
</User>
<User>
   <button>click</button>
</User>
<User >
   <h3>3rd elem</h3>
</User>
```

```javascript
//App.js file
function App(props) {
  return(
        <>
            {props.children}  //call all childrean of props
        </>
   );
}
```

## Pass Data

Props are also how you pass data from one component to another, as parameters.

```javascript
// 2nd file who get data
function Auser(props) {
  return (
    <div>
      
      <h1>mahi live {props.adress}</h1>
    </div>
  );
}
export default Auser;
```

```javascript
//1st file who pass props to another component
function App() {
  return (
    <div>
      <Auser adress="New delhi"/>
    </div>
  );
}
export default App;
```

# Prop's Type's

* Means type checking.
    
* To install and add the dependency for PropTypes use this command(in terminal):- `npm install prop-types` .
    
* Then add import:- `import PropTypes from 'prop-types'` .
    
    ***Ex-***
    
    ```javascript
    import PropTypes from 'prop-types';
    function App(props) {
      return (
        <div>
          <h1>hey {props.name}</h1>
          <h1>hey {props.age}</h1>
    
          // convert bool value to string for show and understand error.
          <h1>hey {props.ismarried.tostring()}</h1>
                         //or
          <h1>hey {String(props.ismarried)}</h1>
    
          //arr check
          <h1>hey {props.arr}</h1>
          <h1>hey {props.arr[1]}</h1>
        </div>
      );
    }
    
    //proptypes check code write outside function
    App.propTypes = {
        name: PropTypes.string,
        age: PropTypes.number,
        ismarried: PropTypes.bool,
        arr: PropTypes.array,
    }
    export default App;
    ```
    

***Note:-*** *When an* ***invalid datatype*** *is provided to a prop a warning will be shown in the* ***javascript console.***

1. **isRequired**:-
    
    mean that props element defined is required to be passsed from parent component. if you don't pass it react show warning.
    
    ```javascript
      age: PropTypes.number.isRequired,
    ```
    
2. **Default prop value in react js :-**
    
    you can add default value for the props by using defaultprops built-in property in 'prop-types' module.
    
    ```javascript
    // write after check prop-types
    App.defaultProps = {
        name: 'Blank name',
        age: '00'
    }
    ```
    

### Wide Range of Validators

1. `PropTypes.array` ,
    
2. `PropTypes.bool` ,
    
3. `PropTypes.func` ,
    
4. `PropTypes.number` ,
    
5. `PropTypes.object` ,
    
6. `PropTypes.string` ,
    
7. `PropTypes.symbol` ,
    

## Props used in class component

```javascript
import React, { Component } from 'react'

export class User extends Component {
    render() {
        return (  
            <div>
                {/* data ko get krna h to this.props use krte h */}
                <h1>hello  {this.props.name}</h1>
                <h1>age {this.props.age}</h1>

                {/* children prop */}
                {/* {this.props.children} */}

                {/* pass data */}
                <User2 fi={this.props.name}/>

            </div>
        )
    }
}
```

## pass data in class component

```javascript
import React, { Component } from 'react'

export class User extends Component {
    render() {
        return (  
            <div>
                {/* data ko get krna h to this.props use krte h */}
                <h1>hello  {this.props.name}</h1>
                <h1>age {this.props.age}</h1>

                {/* pass data */}
                <User2 fi={this.props.name}/>

            </div>
        )
    }
}
export class User2 extends Component {
    render() {
        return (
            <div>
                <h1>hupp anku {this.props.fi}</h1>
            </div>
        )
    }
}
```

## children props

```javascript
import React, { Component } from 'react'

export class User extends Component {
    render() {
        return (  
            <div>
                {/* data ko get krna h to this.props use krte h */}
                <h1>hello  {this.props.name}</h1>
                <h1>age {this.props.age}</h1>

                // children prop 
                {this.props.children}
            </div>
        )
    }
}
 
```

## checks props-types in class cimponent

```javascript
import React, { Component } from 'react'

export class User extends Component {
    render() {
        return (  
            <div>
                {/* data ko get krna h to this.props use krte h */}
                <h1>hello  {this.props.name}</h1>
                <h1>age {this.props.age}</h1>
            </div>
        )
    }
}
 
User.propTypes = {
    name: PropTypes.string,
    age:PropTypes.number
}
```

Happy learning..