Way for child to inherit all properties from parent

Question

I have three components that make up a fourth I want to call Search.

<SearchContainer>
  {this.props.withFilter ? <SearchFilter>Filter Orders </SearchFilter> : null}
   <SearchBox withFilter={this.props.withFilter}'/>
</SearchContainer>

However, the SearchBox component takes a couple of props itself.

{
  action: React.PropTypes.string,
  name: React.PropTypes.string,
  method: React.PropTypes.string,
  placeholder: React.PropTypes.string,
  withFilter: React.PropTypes.boolean
}

I want to be able to call the Search component and be able to pass a whole bunch of props to SearchBox without having to add each attribute into Search. Is there a way for a child to inherit props of the parent?

Ideally I can pass props to Search and SearchBox can access them without me explicitly having to write each attribute.

<Search placeholder='Hi'>

It sounds to me like you're looking for the "jsx spread attributes" syntax, where you can pass all props to a sub-component like: `{... this.props}`. Check out [this page](https://facebook.github.io/react/docs/transferring-props.html) for some other examples and options. — Carl Groner, Sep 16 '15 at 00:05

score 2 · Accepted Answer · answered Sep 16 '15 at 02:00

As Carl Groner said in the comment above spread attributes did the trick.

var React = require('react')

var SearchContainer = require('../shopify-react-ui/SearchContainer')
var SearchFilter = require('../shopify-react-ui/SearchFilter')
var SearchBox = require('../shopify-react-ui/SearchBox')

module.exports = React.createClass({
  displayName: 'Search',
  propTypes: {
    withFilter: React.PropTypes.boolean
  },
  render: function () {
    return (
      <div>
       <SearchContainer>
          {this.props.withFilter ? <SearchFilter>Filter Orders </SearchFilter> : null}
          <SearchBox {...this.props}/>
        </SearchContainer>
      </div>
    )
  }
})

Then You can use this component like this:

<Search placeholder='Hi Mom!'/>

Way for child to inherit all properties from parent

1 Answers1