import React from 'react'; import ReactDOM from 'react-dom'; class MyForm extends React.Component { constructor(props) { super(props); this.state = { username: '' }; } myChangeHandler = (event) => { this.setState({username: event.target.value}); } render() { return ( <form> <h1>Hello {this.state.username}</h1> <p>Enter your name:</p> <input type='text' onChange={this.myChangeHandler} /> </form> ); } } ReactDOM.render(<MyForm />, document.getElementById('root'));
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter