title: Props in React Js
body: <p>I am starting to use Props in React, but I don't understand their use. Start with something simple which is to display a message by console. In one component is the button and in the other component the message, but nothing reaches me.</p>
  <p>First Component</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    export const FirtComponent = ({play}) =&gt; {
  
          return (
  
              &lt;&gt;
              
              &lt;h2&gt;i'm First Component&lt;/h2&gt;
              &lt;button onClick={play}&gt;Send&lt;/button&gt;
              &lt;/&gt;
          )
        }</code></pre>
  </div>
  </div>
  </p>
  <p>Second Component</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    const SecondComponent = () =&gt; {
  
          const play = () =&gt;{
              console.log("Hey!");
  
          }
  
          return (
              &lt;&gt;
              &lt;h2&gt;i'm second Component&lt;/h2&gt;
              
              FirstComponent
              play={play}
              /&gt;
  
              &lt;/&gt;
          )
      }
  
      export default Second Component</code></pre>
  </div>
  </div>
  </p>
  <p>My other question taking advantage of the post. How do I know who is the parent and child component? Is there a convention to identify them or does it depend entirely on who passes components to whom?</p>
  <p>Can you pass parameters or functions from one component to another bi-directionally? That is, they both send parameters to each other at runtime.</p>