In this video we are going to learn about function as Props.
Lets see how can we pass a props as a function.
So for that Go to the project and just click on src then component.
Inside the component lets create a new component.
Lets say component name is Employee.js.
Now inside the Employee component just write here.

import React, { Component } from 'react'

class Employee extends Component {
    render() {
        return (
            <div>
                <h1>Employees</h1>
            </div>
        )
    }
}

export default Employee;

Now go to the App.js and import the Employee component.

import Employee from './components/Employee'; 

Now here add the Employee inside the component return;

<Employee /> 

Now save the file and lets check.
So switch to the browser and you can see the Employee component.
Now change app component from functional component to class component.
So for that just write here.

import React, { Component } from 'react';
class App extends Component { 
    state={ 
    } 
  render() { 
      return ( 
        <div className=\"App\"> 
          <Employee /> 
        </div> 
      ); 
  }
} 

Now add the state here and here create a object.

<pre><code className=\"php\">
state = { 
    employees: [ 
        {id=1,name:'Jenifer',email:'jenifer@gmail.com',phone:'1234567890'}, 
        {id=2,name:'John',email:'john@gmail.com',phone:'1234567891'}, 
        {id=3,name:'Peter',email:'peter@gmail.com',phone:'1234567892'}
    ] 
} 
</code></pre>

Now pass the object to the Employee component.

<Employee employees={this.state.employees} /> 

Now go to the employee component and here just access the comployee object.
So just write here inside the render method.

import React, { Component }  from 'react';
class Employee extends Component { 
    render() { 
        const employees = this.props.employees; 
        const employeeList = employees.map(employee =>{ 
            return( 
                <div key={employees.id}> 
                    <p>Name: {employee.name}</p> 
                    <p>Email: {employee.email}</p> 
                    <p>Phone: {employee.phone}</p> 
                </div> 
            ) 
        }); 
        return ( 
            <div> 
                <h1>Employees</h1> 
                {employeeList} 
            </div> 
        ) 
    } 
} 
export default Employee; 

Now save all and let see the result.
So switch to the browser and you can see the employee list.
Alright, Now add a new component for adding the new employee.
Lets say component name is AddEmployee.js.
Now inside the AddEmployee component write the following code.
Just import react and component.

import React {Component} from 'react'; 
class AddEmployee extends Component{ 
    state={ 
        name:null, 
        email:null, 
        phone:null 
    }
    handleChange=(e)=>{ 
        this.setState({ 
            [e.target.name]:e.target.value. 
        });
    } 
    render(){ 
        return{ 
        <div> 
            <form> 
                Name : <input type=\"text\" name=\"name\" onChange={this.handleChange} /> <br/> 
                Email: <input type=\"text\" name=\"email\" onChange={this.handleChange} /> <br/> 
                Phone: <input type=\"text\" name=\"phone\" onChange={this.handleChange} /> <br/> 
                <button>Submit</button> 
            </form>   
        </div> 
        } 
    } 
} 

Now go to app.js and here create a function.

addEmployee=(employee)=>{ 
    employee.id=Math.random(); 
    let employees = […this.state.employees,employee] 
    this.setState({ 
        employees: employees. 
    });
} 

Now pass the addEmployee function to the AddEmployee Component.

<AddEmployee addEmployee={this.addEmployee} /> 

Now go to the AddEmployee Component and inside the handleSubmit fuction.
Call the addEmployee function.

handleSubmit=(e)=>{ 
    e.preventDefault(); 
    this.props.addEmployee(this.state); 
}

Alright now all done.
Now lets check.
So switch to browser.
You can see the employee list and this is form for adding new employee.
So just enter name, email, phone.
and just click on submit.
You can see an employee has been added.
So in this way you can pass the function as props.