How to implement Advanced props-drilling in React JS

In this article, we are going to learn how to implement advanced props drilling in react js
In this article ,we are going to make the react snippet which allows us to remove data from object of array by pressing the removeButton with the help of advanced props-drilling. Props drilling means sometimes we have to send data in from of props from parent to child component or child to parent component by use of different props function or props variable .So this article page is best place for you.First we have to make the react app by using npx create-react-app [App-name].After creating the react app,we have to modify the App.js file according to our taste.

App.js file is displayed below:

1import "./styles.css";
2import { useState } from "react";
3import List from "./List";
4
5export default function App() {
6 //Object of Array
7  const Data = [
8    {
9      id: 1,
10      name: "hASSAN "
11    }
12  ];
13  //State
14  const [people, setPeople] = useState(Data);
15  //fUCTION TO REMOVER PERSON
16  const removePerson = (id) => {
17    setPeople((people) => {
18      return people.filter((person) => person.id !== id);
19    });
20    console.log("AData", people);
21  };
22  console.log("AData", people);
23  return (
24    <>
25      <p>Props Drilling </p>
26
27      <List people={people} removePerson={removePerson} />
28    </>
29  );
30}

List.js file is displayed below

1
2  import React from "react"
3import SinglePerson from "./singlePerson";
4 const List=function({people,removePerson}){
5  return(<>
6  {people.map((person)=>{
7    return(
8    <SinglePerson   
9     key={person.id}
10    {...person}
11    removePerson={removePerson} />
12    );
13  })}
14
15  </>);
16}
17export default List

singlePerson.js file is displayed below

1
2    import React from "react"
3 const SinglePerson=function({id, name, removePerson}){
4  return(<>
5 <div className='item'>
6      <h4>{name}</h4>
7      <button onClick={() => removePerson(id)}>remove</button>
8    </div>
9  </>);
10}
11export default SinglePerson

Here is the link of live example which we done so far:
Click here