I was learning React and I came to a point which created confusion. Everywhere I was using props while writing Function components.

I always use `props.profile` and it works fine. But in one code component, I had to write 
`const profiles=props;` and it worked fine.

I tried using `const profiles=props.profile`; and also I tried using inside `return` in 'Card' function component

`{props.profile.avatar_url}` but both of them failed

Below is my code which works fine

```
const Card=(props)=>{
  const profiles=props; //This I dont understand
  return(
    <div>
      <div>
        <img src={profiles.avatar_url} width="75px" alt="profile pic"/>
      </div>
      <div>
        <div>{profiles.name}</div>
        <div>{profiles.company}</div>
      </div>
    </div>
  );
}

const CardList=(props)=>{
  return(
    <div>
      {testDataArr.map(profile=><Card {...profile}/>)}
    </div>
  );
}

```

Can someone please help me understand why I can't use `const profiles=props.profile`?

What are the other ways to achieve the correct result?