Pass a Callback as Props

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

class MyApp extends React.Component {
	constructor(props){
  	super(props);
    this.state = {
    	inputValue: '',
    }
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(event){
  	this.setState({
    	inputValue: event.target.value,
    })
  }
  
  render(){
  	return (
    	<div>
    	  <GetInput input={this.state.inputValue}
                  handleChange={this.handleChange}/>
        <RenderInput input={this.state.inputValue}/>
    	</div>
    )
  }
}


class GetInput extends React.Component{
	constructor(props){
  	super(props);
  }
  
  render(){
  	return (
    	<div>
    	  <h3>Get Input:</h3>
        <input value={this.props.input}
               onChange={this.props.handleChange}
        />
    	</div>
    )
  }
}

class RenderInput extends React.Component{
	constructor(props){
  	super(props);
  }
  
  render(){
  	return (
    	<div>
    	  <h3>Input Render:</h3>
        <p>{this.props.input}</p>
    	</div>
    )
  }
}

ReactDOM.render(
	<MyApp />,
  document.getElementById('root')
)