title: Why props alone are being used in called React function component?
body: <p>I was learning React and I came to a point which created confusion. Everywhere I was using props while writing Function components.</p>
  
  <p>I always use <code>props.profile</code> and it works fine. But in one code component, I had to write 
  <code>const profiles=props;</code> and it worked fine.</p>
  
  <p>I tried using <code>const profiles=props.profile</code>; and also I tried using inside <code>return</code> in 'Card' function component</p>
  
  <p><code>{props.profile.avatar_url}</code> but both of them failed</p>
  
  <p>Below is my code which works fine</p>
  
  <pre><code>const Card=(props)=&gt;{
    const profiles=props; //This I dont understand
    return(
      &lt;div&gt;
        &lt;div&gt;
          &lt;img src={profiles.avatar_url} width="75px" alt="profile pic"/&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;{profiles.name}&lt;/div&gt;
          &lt;div&gt;{profiles.company}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  const CardList=(props)=&gt;{
    return(
      &lt;div&gt;
        {testDataArr.map(profile=&gt;&lt;Card {...profile}/&gt;)}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Can someone please help me understand why I can't use <code>const profiles=props.profile</code>?</p>
  
  <p>What are the other ways to achieve the correct result?</p>