Understanding documentation of React with redux

Question

I am currently reading the documentation about react and redux:

https://github.com/reactjs/redux/blob/5502940e7f139bb88bf0b67fcb838a7e3de3be6c/docs/basics/UsageWithReact.md

There, specifically in the code example here:

https://github.com/reactjs/redux/blob/5502940e7f139bb88bf0b67fcb838a7e3de3be6c/docs/basics/UsageWithReact.md#containersfilterlinkjs

you can see this line:

dispatch(setVisibilityFilter(ownProps.filter))

Now my question is, where does the 'filter' property in ownProps come from? Can somebody explain to me, where the connection is?

J. Mark Stevens · Accepted Answer · 2016-11-01 17:52:31Z

1

It is in the call to filterlink.

components/Footer.js

import React from 'react'
import FilterLink from '../containers/FilterLink'

const Footer = () => (
  <p>
    Show:
    {" "}
    <FilterLink filter="SHOW_ALL">
      All
    </FilterLink>
    {", "}
    <FilterLink filter="SHOW_ACTIVE">
      Active
    </FilterLink>
    {", "}
    <FilterLink filter="SHOW_COMPLETED">
      Completed
    </FilterLink>
  </p>
)

export default Footer

answered Nov 1, 2016 at 17:52

J. Mark Stevens

4,9452 gold badges15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TomW · Accepted Answer · 2016-11-01 17:54:22Z

0

ownProps are the props that were passed directly to the component by the React render call of the component's parent. In this case, the component in question is FilterLink. The FilterLinks are being passed a filter prop by the render method of its parent, Footer.js. e.g.

<FilterLink filter="SHOW_ALL">
  All
</FilterLink>

answered Nov 1, 2016 at 17:54

TomW

4,0021 gold badge25 silver badges26 bronze badges

Collectives™ on Stack Overflow

Understanding documentation of React with redux

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related