i am learning react at the moment. this is the link with the code - .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?

i am learning react at the moment. this is the link with the code - http://redux.js/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?

• javascript
• reactjs

• 2 check the doc, very properly explained: 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 Commented Jun 24, 2017 at 8:41
• ok, let me check – faraz Commented Jun 24, 2017 at 8:42

3 Answers 3

When you use a Custom ponent, like

<MyComponent>Hello World</MyComponent>

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

So when write your ponent like

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

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

Consider for example, you call the Link ponent 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 ponent.

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 ponent. 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 ponent like

<Link />

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

<Link>Text</Link>

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.

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}
    </>
  )
}