destructuring example in react js

Example 1: definition destructuring react

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

Example 2: definition destructuring react

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