<div id='app'></div>
@import url(https://fonts.googleapis.com/css?family=Roboto:100);

h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}
class Parent extends React.Component {
  constructor(props){
    super(props);
    
    this.state = {
      input: ''
    }
  }
  
  handleChange(e) {
    this.setState({
      input: e.target.value
    })
  }
  
  render() {
    // Here we'll pass two props on the <Child /> component. The first, named currentInput is tied directly to this.state.input and will propagate through this.props.currentInput, the other we are simply setting manually to a string    
    return(
      <div>
        <input 
          onChange={this.handleChange.bind(this)} 
          value={this.state.input} 
          placeholder="Type away" />
        <Child 
          currentInput={this.state.input} 
          color="#76daff" />
      </div>
    );
  }
}

class Child extends React.Component {
  // We have access to the props that were passed in from the parent on {this.props...}
  render() {
    return(
      <h2 style={{color: this.props.color}}>
        {this.props.currentInput}
      </h2>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://fb.me/react-15.1.0.min.js
  2. https://fb.me/react-dom-15.1.0.min.js