children prop in React component

Question

i am learning react at the moment. this is the link with the code - http://redux.js.org/docs/basics/ExampleTodoList.html

I am having a bit of difficulty understanding what's going on in this part of the code

const Link = ({ active, children, onClick }) => {
  if (active) {
    return <span>{children}</span>
  }

  return (
    <a
      href="#"
      onClick={e => {
        e.preventDefault()
        onClick()
      }}
    >
      {children}
    </a>
  )
}

Link.propTypes = {
  active: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired
}

I am having the most difficulty understand this snippet

return (
        <a
          href="#"
          onClick={e => {
            e.preventDefault()
            onClick()
          }}
        >
          {children}
        </a>
      )
    }

What does {children} mean here? What does it do?

and what does this do?

children: PropTypes.node.isRequired,

what is meant by node in the above line?

check the **doc**, very properly explained: https://facebook.github.io/react/docs/jsx-in-depth.html#children-in-jsx **In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: props.children.** — Mayank Shukla, Jun 24 '17 at 08:41

Shubham Khatri · Accepted Answer · 2017-06-24T08:49:22.733

12

When you use a Custom component, like

<MyComponent>Hello World</MyComponent>

Whatever you write between the tags (in above case Hello World) is passed to the component as a children prop.

So when write your component like

const Link = ({ active, children, onClick }) => {

You are destructuring the props and getting only active, children and onClick from the props passed to the component

Consider for example, you call the Link component like

<Link active="true" onClick={someFunc} style={{color: 'orange'}}>Hello</Link>

Then amongst all the props i.e active, onClick, style, children, you will only be accessing active, onClick,children in the component.

For your second question:

and what does this do?

children: PropTypes.node.isRequired,

So here PropTypes is a way of performing a typeCheck on the props that are passed to the component. It is being imported from the react-proptypes package.

So

children: PropTypes.node.isRequired

makes the prop children to be required. So if your render your component like

<Link />

It will not pass the type check and hence you need to do

<Link>Text</Link>

edited Jun 24 '17 at 08:49

answered Jun 24 '17 at 08:42

Shubham Khatri

270,417
55
406
400

ok thanks. this helps. what I'd like to know is if (active) { return {children} } so, in the above code, if it is active, then {children} will be returned which is equal to All Active and completed. right? or maybe it just returns the child which is active. So, if All is active, then it returns All as disabled and we'll be unable to click and for the rest, i.e. the 2nd return it will show up as the active links?? but both of them are written as just {children} and that's making me a bit confused. – faraz Jun 24 '17 at 08:53
So whatever is passed between link tags will be returned by {children} for an individual tag. So if you have three such tags, then each of them will return a different children based on the children prop and the active prop value – Shubham Khatri Jun 24 '17 at 08:56
Happy to help :) – Shubham Khatri Jun 24 '17 at 08:57

maheeka · Answer 2 · 2017-06-24T08:49:50.557

children: PropTypes.node.isRequired,

this is just the type checking of the react proptypes. Refer https://facebook.github.io/react/docs/typechecking-with-proptypes.html for more details how type checking works.

According to the example this says that the prop children is required and is of type node. This type node refers to anything that can be rendered. which is then included within the tag in your rendering.

score 0 · Answer 3 · answered Aug 27 '20 at 17:28

If you care about the types of your props, you'd need to use React.PropsWithChildren, e.g.

type Props = React.PropsWithChildren<{
  name: string; // strongly typed!
  myProp: string;
}>;

export function MyComponent({ name, myProp, children }: Props) {
  return (
    <>
      <div>{name}</div>
      <div>{myProp}</div>
      {children != null && children}
    </>
  )
}

children prop in React component

3 Answers3

Linked

Related