CODEWITHSUNDEEP
reactjs
Umair
Umair

Reputation: 469

React props vs children. What to use when?

What is the difference between the two approaches ?

Passing text for a button as props

<TextComponent title="Save"/>

function TextComponent(props){
  return <button>{props.title}<button/>
}

vs

Passing text as a child

<TextComponent>Save<TextComponent />

function TextComponent(props){
  return <button>{props.children}<button/>      
}

Upvotes: 26

Views: 16472

Answers (6)

Ishita Singh
Ishita Singh

Reputation: 337

As mentioned in the React official docs:

Some components don’t know their children ahead of time. This is especially common for components like Sidebar or Dialog that represent generic “boxes”.

We recommend that such components use the special children prop to pass children elements directly into their output:

Simply put, it props.children just displays whatever is put between the opening and closing tags.

As asked in your question, there is not much difference in the use case specified by you.

But, say you had a small left icon the component then passing 'title' as a separate prop would make more sense Eg.

<TextComponent title="Save" src="https://..." />

function TextComponent(props) {
  return (
    <div>
      <img src={props.src}/>
      <button>{props.title}<button/>
    </div>
  );
}

Upvotes: 2

Ted van Gageldonk
Ted van Gageldonk

Reputation: 51

Pedantically said, when I pass something that is a child I use children, and when I pass a property I use a prop. Here is an example.

const LoginForm = () => {
  // use hooks for form state
  return (
    <SomeForm>
      <UserNameTextField />
      <PassWordField />
    </SomeForm>
  )

I now want to add a forgot-password button, which I choose to define as a child for LoginForm.

  • I don't want to add this to the JSX inside LoginForm, because the button does not relate to the component state at all.
  • I do not want to add it as a component prop, because a forgot-password button is not a property of a form. (It's not a onSubmit callback, nor a bit of styling, nor something that adjusts the form aspect of LoginForm.)

Therefore, I use a child.

const LoginForm<{ children?: { forgotPasswordButton: ReactNode }}> = ({ children }) => {
  // same as before
  return (
  // ..
      <PasswordField />
      {children?.forgotPasswordButton}
    </SomeForm>

Upvotes: 0

GibboK
GibboK

Reputation: 73918

You use props.children on a component which acts as a container and does not know about their children ahead of time.

Basically props.children it is used to display whatever you include between the opening and closing tags of the "containing" component when invoking it.

Upvotes: 3

Tomer
Tomer

Reputation: 1568

When you do know what your props are, use props. Otherwise, use children (aka containment).

Other than that, using props/children in your case depends on what you want to pass:

  1. If its a single props (like item), than it doesn't matter which method you'll choose.
  2. Else, you should check what you are passing inside children as you might pass other values which you don't want to render.

I would suggest using the selective approach (e.g props.title), since you are always aware of whats going inside your components.

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281686

children prop is something that you use when the structure of what needs to be rendered within the child component is not fixed and is controlled by the component which renders it.

However if behaviour of the component is consistent across all its renders it can define the specific props that it needs and the parent can pass them to it.

A very simple example could be a Navbar which can use children. For a Navbar the items that it needs to render as well as the order or alignment or items depends on how it needs to be used at different instances or across different pages. For instance Navbar somewhere can have Search component at one place and at some other place not have it. Also the menus may sometimes be needed to the left followed by Login menu item to the right and a searchbar between them and sometimes they may all be present to the right without the searchbar. In such cases the parent component can control how the internal structure would be

Upvotes: 16

Clafouti
Clafouti

Reputation: 4595

You should use children when you don't know them ahead of time, see: https://reactjs.org/docs/composition-vs-inheritance.html

Here, if you KNOW that you'll use a title inside your child component, just use a named prop.

I'd say that if you ask yourself the question: "Ok, but what will that generic component render?" is when you should use children

Upvotes: 9

Related Questions