JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

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

</div>

Babel + JSX

class MainApp extends React.Component {
          constructor(props) {
            super(props);

            this.state = {
              fName: 'Default',
              lName: '',
              email: ''
            }
            this._handleChange = this._handleChange.bind(this);
          }

          //dynamically update the state value using name 

          _handleChange(e) {
            const {
              name,
              value
            } = e.target;
            this.setState({
              [name]: value
            });
          }

          render() {
            return (
              <div className = "content">
              <dic>You can pass state and onchange function as params</dic>
              <Form formState = {this.state} _handleChange = {this._handleChange}></Form>
              </div>
            )
          }
        }



        class Form extends React.Component {
          constructor(props) {
            super(props);
          }

          render() {
            return (<form >
              <input placeholder = "First Name"
              defaultValue = {this.props.formState.fName}
              id = "fName"
              name = "fName"
              onChange = {e => this.props._handleChange}/>
              </form>
            )
          }
        }

        ReactDOM.render(<MainApp / > ,
          document.getElementById('app')
        );