REACT - Sending Props to component

Sending Props to component
in below sample we are sending Object as Props to child component
it also has sample code for destructing of variable 


// PARENT
import React from "react"
import ObjectASPropsInFunc from './ObjectAsPropsInFunc'

function ObjectAsPropsMain()
{
    const persons    =[
        {Name:"Switin", Email:"sk@test.co.in", 
            Contact :[{Phone:1234},{Phone:654},{Phone:987987}]
        },
        {Name:"Sam", Email:"sam@test.in", 
            Contact : [{Phone:546546},{Phone:6498797},{Phone:798797}]
        }
    ]
    return(
        <div>
            <h3>This is Object to Component</h3>
            <p>
                for working Destructing of Object/Variable. Check for Console
            </p>  
            {
                // Loop in REACT USING MAP
                persons.map((Person,i) =>
                    <ObjectASPropsInFunc data={Person} ></ObjectASPropsInFunc>
                )
                
            }                
        </div>
    )
}
export default ObjectAsPropsMain;

/// CHILD
import React from "react";

function ObjectAsPropsInFunc(props)
{   
    // When we define variable in Cruly bracket {}. This concept is called as Destructing
    // in below case Props has Object with multiple field

    // {Name:"Switin", Email:"sk@test.co.in", Contact :[{Phone:1234},{Phone:654},{Phone:987987}
    // Which is been sent as name with Data in props 

    // <ObjectASPropsInFunc data={Person} ></ObjectASPropsInFunc>
    
    // now If we need any Field directly from object no need to access the property . 
    // just use {} with Property Name inside this {Name} it will auto map it

    //let Name = props.data.Name;
    let {Name} = props.data;  

   // THIS IS DESTRUCTING OF OBJECT . PROPERTY NAME HAS TO MATCH WITH VARIABLE NAME

    console.log({Name})


    //let dt = props.data;
    let {data} = props;  

   // THIS IS DESTRUCTING OF OBJECT . PROPERTY NAME HAS TO MATCH WITH VARIABLE NAME

    console.log({data});
    return(
        <div>          
            <p>
             <span className="formatSpan"> {props.data.Name} </span>          
            <span className="formatSpan"> Email :- {props.data.Email}</span>         
            </p>                      
        </div>
    )
}
export default ObjectAsPropsInFunc;