Props in React Js-CodePudding

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.

First Component

    export const FirtComponent = ({play}) => {

        return (

            <>
            
            <h2>i'm First Component</h2>
            <button onClick={play}>Send</button>
            </>
        )
      }

Second Component

    const SecondComponent = () => {

        const play = () =>{
            console.log("Hey!");

        }

        return (
            <>
            <h2>i'm second Component</h2>
            
            FirstComponent
            play={play}
            />

            </>
        )
    }

    export default Second Component

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?

Can you pass parameters or functions from one component to another bi-directionally? That is, they both send parameters to each other at runtime.

(English is not my native language, sorry if I said something wrong)

CodePudding user response：

It looks like the second component is the parent here, since you import the first component and pass the play() to be the button's click handler.

I recommend double checking that props destructured in the first component are done do with the exact same spelling and casing.

To answer your second question, props flow down the component tree, not upward. Changes in props cause rerenders with children components.

It is possible to pass a function to a child that returns data to the parent.

CodePudding user response：

One of the biggest advantages of frameworks like React,
is the ability to split parts of your code into reusable components.

Say you're building an app with a component who's job is to render a list.
After a while, your app gets bigger, and you need another list with the same structure, but which displays different data.
Since your list in this example is a part of a component who handles only the list and nothing else, you can simply use the same component twice, but send the relevant data in each case.

What you would use to send that data will most likely be "props".
Props is the conventional name we use for sending data (variables, function, etc..) to a child component.

As for your question regarding "parent"/"child" relationship,
you can pretty much understand it from it's name.
I.E. - a child component will usually be rendered inside a parent component.

So if we go back to the example with the list component,
we might have something like this:

function List({ data }) {
   return (
      // The data (prop) that we receive from ListPage.
      <p>{ data }</p>
   )
}

function ListPage({ data, differentData }) {
   return (
      <div>
         // Other ListPage UI
         <List data={data} />
         // Reusing the same component twice, but with different data
         <List data={differentData} />
      </div>
   )
}

function App() {
  const data = 'Hello World!';
  const differentData = 'Hello again!';

  return (
    <div>
       // ListPage is our parent component, data is our "Props"
       <ListPage data={data} differentData={differentData} />
    </div>
  )
}

In this example, we have the ListPage parent component, the List child component and the main App component which is a parent of both of them.
They can also be split into different files, etc..

This is a very common pattern in these frameworks.
Obviously they have plenty more advantages.

Hope this was clear enough.
Happy coding!