JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

Babel + JSX

const MyInput = ({username, handleOnchange})=>{
        return (
         <div>
            <input type="text" value={username} onChange={handleOnchange}/>
         </div>
        );
};
 
 
 class MyForm extends React.Component{
    constructor(props,context){
        super(props,context);
        this.state={
        	username:'',
        }
    		this.handleOnchange=this.handleOnchange.bind(this);
        this.foo=this.foo.bind(this);
    }
    
     handleOnchange(e){
     	e.preventDefault();
			let name=e.target.value;
      this.setState({username:name});
    }
    
    foo(){
      console.log(this.state.username);
    }
    
    render(){
        return(
        <div>
        		<MyInput username={this.state.username} handleOnchange={this.handleOnchange}/> <button onClick={this.foo} > click </button>

            </div>
        );
    }
    
 }
 
React.render(<MyForm />, document.body);