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

<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.

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} .
```
  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

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

//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.

// 2nd file who get data
function Auser(props) {
  return (
    <div>

      <h1>mahi live {props.adress}</h1>
    </div>
  );
}
export default Auser;

//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-

  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.

isRequired:-

mean that props element defined is required to be passsed from parent component. if you don't pass it react show warning.
```
   age: PropTypes.number.isRequired,
```
Default prop value in react js :-

you can add default value for the props by using defaultprops built-in property in 'prop-types' module.
```
 // write after check prop-types
 App.defaultProps = {
     name: 'Blank name',
     age: '00'
 }
```

Wide Range of Validators

PropTypes.array ,
PropTypes.bool ,
PropTypes.func ,
PropTypes.number ,
PropTypes.object ,
PropTypes.string ,
PropTypes.symbol ,

Props used in class component

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

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

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

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..

Megha Khatri's Blog