CODEWITHSUNDEEP
reactjs
James Gaehring
James Gaehring

Reputation: 31

Is it safe to pass a component props called "children"?

Can I pass children={someArray} as props to a component without muddling the namespace for props.children? I've tried it, and I'm actually surprised it doesn't seem to break anything. Still, it seems like a very bad idea. Should I be concerned about potential collisions down the road, or does React protect against this somehow?

For context, I'm writing a HOC for creating an accordion-style row in a list, and I want to keep the props it passes down as simple and generic as possible, for the sake of reuse. The parent/children paradigm just seems the most intuitive.

Here's a simplified version:

function ProductList(props) {
  return (
    <List>
      {props.products.map(product => ( 
        <ProductWithVarieties parent={product} children={product.varieties} key={item.id} />
      ))}
    </List>
  )
}

function withChildren(ParentComponent, ChildComponent) {
  return class extends React.Component {
    // OMMITTED: a constructor, some life cycle hooks, event handlers, etc.
    render(props) {
      const renderChildren = () => {
        return this.props.children.map(child => {
          return <ChildComponent {...child} key={child.id}/>
        })
      }
      return (
        <div>
          <ParentComponent 
            {...this.props.parent} 
            onClick={this.toggleChildren}
            hasChildren={this.props.children.length > 0} />
          { this.state.showChildren ? renderChildren() : null }
        </div>
      )
    } 
  }
}

const ProductWithVarieties = withChildren(ProductComponent, VarietyComponent)

Upvotes: 0

Views: 42

Answers (1)

Marco
Marco

Reputation: 527

It is "safe" to pass it as children prop, but from standardswise you shouldn't do it and rather call it something different

Upvotes: 1

Related Questions