destructuring prop in react code example

Example 1: definition destructuring react

props = {      attraction: {      address1: "350 5th Ave",      address2: "",      average_rating: 4,      city: "New York",      country: "US",      display_address: ["350 5th Ave", "New York, NY 10118"],      id: 9,      latitude_coordinate: "40.748442285082",      location: {        created_at: "2018–03–07T03:56:20.717Z",        id: 1,        latitude_coordinate: 40.712775,        longitude_coordinate: -74.005973,        ...      }    },    auth: {      loggedIn: true,      loggingIn: false,      ...    } ...  }

Example 2: definition destructuring react

const Attraction = props => {  return (    <div auth={props.auth} key={props.attraction.id}>      <Link        auth={props.auth.token}        to={`/attractions/${props.attraction.url_name}`}        key={props.attraction.id}      >        <img           alt={props.attraction.name}           src={props.attraction.image_url}         />        <h1>{props.attraction.name}</h1>      </Link>      <StarRatings rating={props.attraction.average_rating} />    </div>  );};