React-redux tutorial : Where does children come from

Question

I am following the react-redux tuto : http://redux.js.org/docs/basics/ExampleTodoList.html

Looking at link.js, I am wondering where does the {children} come from

import React from 'react'
import PropTypes from 'prop-types'

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

  return (
     {
        e.preventDefault()
        onClick()
      }}
    >
      {children}
    
  )
}

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

export default Link

link.js is being used by the container component FilterLink.js. FilterLink passes both the "active" value and onclick function but no explict children is passed to link.js

import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

export default FilterLink

Please clarify.

This will help: https://medium.com/@iktakahiro/react-stateless-functional-component-with-typescript-ce5043466011. But short answer is `functional components` accept an argument of type object. This is usually referred as `props`. `({ active, children, onClick })` This is more like `const { active, children, onClick } = props`. Also, for any component, `prop` is the first arg and `state` is second — Rajesh, Sep 08 '17 at 06:57
Note, `SFC` will not have a second prop (`state`). As its stateless, having a state makes no sense. — Rajesh, Sep 08 '17 at 07:41
http://mxstbr.blog/2017/02/react-children-deepdive/ Children from filterlink are passed to link, you connect to FilterLink to link... all text or other nodes in TEXT will be passed internally to link and rendered — Yoeri, Sep 08 '17 at 09:31

Krasimir · Answer 1 · 2017-12-31T07:15:43.467

In React you may have two types of components. A class that extends React.Component or a functional component which is just a vanilla JavaScript function. The functional components also receives props similarly to the class where we use this.props (or receive them as first argument of the constructor. For example:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { name } = this.props;

    return <p>Hello { name }</p>;
  }
}

<MyComponent name='Jon Snow' />

Or as functional component:

function MyComponent(props) {
  const { name } = props;

  return <p>Hello { name }</p>;
}

The confusion in your case comes from the fact that there is a destructing of the props directly in the function definition. So MyComponent above may be written like:

function MyComponent({ name }) {
  return <p>Hello { name }</p>;
}

The children prop in React represents what's added as child elements of the component. For example:

<MyComponent>
  <Name />
</MyComponent>

or even

<MyComponent>
  { () => <p>Hello world</p> }
</MyComponent>

<Name /> and () => <p>Hello world</p> is what props.children is equal to.

In your example children will be what's put inside FilterLink. For example:

<FilterLink>
  <VisibleOnlyIfActiveIsTruethy />
</FilterLink>

score 0 · Answer 2 · edited Dec 31 '17 at 05:11

0

The children prop is coming from the components that could be inside(wrapped by) the Link component when you call it, example:

<Parent>
 <Comp1 />
 <Comp2 />
</Parent>

in this code: Comp1 and Comp2 are children of the Parent component.

edited Dec 31 '17 at 05:11

Leopold Joy

4,524
4
28
37

answered Dec 31 '17 at 02:30

Lafi

1,310
1
15
14

React-redux tutorial : Where does children come from

2 Answers2