React JS Tutorial - Function as Props

In this tutorial, we will learn about passing functions as props in React. Let's see how we can pass a function as a prop to a component.

To start, go to your project and navigate to the src directory, then click on the component folder. Inside the component folder, create a new component, for example, Employee.js.

Inside the Employee.js component, add the following code:

import React, { Component } from 'react'

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

export default Employee;

Next, go to the App.js file and import the Employee component:

import Employee from './components/Employee'; 

Now, add the Employee component to the App.js file:

<Employee /> 

Save the file and let's check the result. Switch to your browser, and you should see the Employee component rendered on the page.

Now, let's change the App component from a functional component to a class component. To do this, add the following code:

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

Next, add a state to the App component and create an object:

    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'}
        ] 
    } 

Now, pass the object to the Employee component:

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

Go to the Employee component and access the employee object 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; 

Save all the files and let's see the result. Switch to your browser, and you should see the employee list rendered on the page.

Now, let's add a new component for adding new employees. Create a new component, for example, AddEmployee.js. Inside the AddEmployee.js component, add the following code:

    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} /> 
 
                    Email: <input type="text" name="email" onChange={this.handleChange} /> 
 
                    Phone: <input type="text" name="phone" onChange={this.handleChange} /> 
 
                    <button>Submit</button> 
                </form>   
            </div> 
            } 
        } 
    } 

Next, go to the App.js file and 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} /> 

Go to the AddEmployee component and call the addEmployee function inside the handleSubmit function:

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

Now, let's check the result. Switch to your browser, and you should see the employee list and a form for adding new employees. Enter the name, email, and phone number, and click on submit. You should see the new employee added to the list.

This demonstrates how to pass functions as props in React. By following these steps, you can create reusable and efficient components for your React application.