Dev Research

Logo

Road to Software Engineering Competence, A Zettelkasten

View the Project on GitHub twhite96/dev-research

Children Prop

Take some content, wrap it in a component that has a style or whatever you want, and in the wrapper component, pass in this.props.children. This will pass down any styles or JavaScript that you want into the child components.

ex:

  class VendingMachine extends React.Component {
    render() {
      return (
        <div
          className='VendingMachine'
          style=
        >
        <Message>
          <h1>hello i am a vending machine. what would you like to eat?</h1>
        </Message>
        <Message>
          <Link to='/soda'>Soda</Link>
          <Link to='/chips'>Chips</Link>
          <Link to='/sardines'>Sardines</Link>
        </Message>
        </div>
      )
    }
  }

Then we can make a Message Component and pass in the children prop to apply some global styles to the content within the Message components in the VendingMachine.

  class Message extends React.Component {
    render() {
      // this prop will apply styles in a Message.css 
      // file to all the children
      // in each Message component
      // in the VendingMachine
      return <div className='Message'>{this.props.children}></div>
    }
  }