CODEWITHSUNDEEP
javascriptreactjs
Mir Stephen
Mir Stephen

Reputation: 1927

How a component pass a prop to another component?

Newbie here, I am studying the documentation of react and in React Context API, I couldn't understand something, I won't understand the rest of the subject if I don't understand it. Can anyone help me what does it mean through using an example?

The Toolbar component must take an extra "theme" prop
and pass it to the ThemedButton. This can become painful
if every single button in the app needs to know the theme
because it would have to be passed through all components.

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  // The Toolbar component must take an extra "theme" prop
  // and pass it to the ThemedButton. This can become painful
  // if every single button in the app needs to know the theme
  // because it would have to be passed through all components.
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

The Toolbar component must take an extra "theme" prop

this can be like <Toolbar theme="dark">

and pass it to the ThemedButton

how Toolbar component pass this prop to ThemedButton? and kindly clarify the rest of the comment as well.

Thank you for any help? You are kind

Upvotes: 1

Views: 68

Answers (2)

Abido
Abido

Reputation: 802

In your Toolbar component, it takes a parameter props, props is whatever properties have been passed to it when calling it, as in <Toolbar param1="someString" param2={someVariable}>, in this case the props value in Toolbar will be an object with the data you passed as key=value like for example: {param1: "someString", param2: content_of_someVariable}

And if you don't actually use those props (properties)/parameters in Toolbar, but rather in a subcomponent, then you have to pass them again to another level, like in <ThemedButton theme={props.theme} />, then ThemedButton itself finally passes the value to the component that actually makes use of, which is in your case: <Button theme={this.props.theme} />;.

So you had to pass the theme across multiple components, which don't use it or care at all about it, just to get it through to the final Button component.

(answer ends here, below is my effort to explain context API in an easy way)

To avoid that annoying level to level to another..., you can use the context API. Because it is really incontinent to pass a value across 3-4+ levels/components every time you want to use it in the last one in the chain.

Think about the context like a variable defined and exported on a root level and holds some data (like the user login status for example, or the theme infomation), and whenever you require that data, you import it and use it directly. You use the Provider property of the context you define (MyContext.Provider) to assign the data to it, and you use the Consumer property (MyContext.Consumer) to consume/access that data you assigned in the provider.

The beauty of the context consumer, is that whenever the data is updated in the provider, the consumer immediately gets the new data and triggers a re-render with the new data.

I hope I explained it in a simple and clear way. Write a comment with any questions or unclear parts and I can try my best to improve the answer.

Best of luck!

Upvotes: 3

logos_164
logos_164

Reputation: 786

Props are properties that help define the way your JSX appears on the page.

When you use a component that you have created, you can pass it props like below:

<MyComponent myProp={myPropValue} />

You can continue to pass props down through the component hierarchy as well. So say you have a component tree like below:

MyComponent
--MySubComponent
----MySubSubComponent

You can pass props from MyComponent to MySubSubComponent like so:

<MyComponent myProps={MyProps} />

<MySubComponent mySubProps={props.myProps} /> //Props are the value you gave in the parent component

<MySubSubComponent mySubSubProps={props.mySubProps} />

Whatever title you give the props when declaring the component in JSX is the title you will call to get the value of the prop like props.myProps

Upvotes: 2

Related Questions