React component that receives, extends, and transfers props

Row.js

class Row extends Component {
  // this component receives props and extends it with color and effect. `super()` keyword permits us to use `this`
  constructor(props) {
    super(props)
    this.color = 'blue'
    this.effect = 'wow'
  }

  render () {
    return (
    <div>
      {
        this.props.letter.map((letter, index) =>
        <Box
        // we can spread over props to pass down everything and explicitly declare the props we use.
          {...this.props}
          key={ index }
          letter={letter}
          
          // and here we add the new props created on line 4.
          color={this.color}
          
          // better for this specific example is to set new props directly on the component:
          newProp={'this is a new prop value that can be accessed by child components at "props.newProp"'}
          otherColor={'red'}
          />
        )
      }
    </div>
    )
  }
}

export default Row

// here's a list of props available to this components children:
// newProp, otherColor, color, effect, plus all the props that were passed down to this component!