JSFiddle - React, Tailwind, and code Playground

by Kelsey Williams

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>

<div id="app"/>




Description Bullets (suggested uses)

CSS

button {
    margin-left: 5px;
}

input {
    margin: 5px;
}

form {
 padding-right: 10px;   
}

Babel + JSX

var TextBox = React.createClass({
    render: function() {
        return (
        <div>
          
        <label for={this.props.name}>{this.props.name}</label>
            <input className='form-control' 
                name={this.props.name}
                type='text' 
                value={this.props.value}
                onChange={this.props.onChange}/>
        </div>
        );
    }
});

var BulletForm = React.createClass({
    addBullet: function(event) {
    	event.preventDefault();
      this.prop.addBullet();
    },
    render: function() {
        return (
        <div>
          <label for={this.props.name}>{this.props.name}</label>
          <div id={this.props.name}>
          {this.props.value.map((value, index) => {
        return <input className='form-control' 
              type='text' 
              name={this.props.name}
              value={value}
              onChange={this.props.onChange(index)}/>
      })}
            
         </div>
         <button className='btn btn-success' name={this.props.name}
           type='submit' onClick={this.props.addBullet}>
           Add Bullet
         </button>
      </div>
        );
    }
});

var ExampleForm = React.createClass({
    getInitialState: function () {
        return { form: { productName: 'Ryan', brandName: 'Vice', description: ["test", "erg"]} }
    },
    onChange: function(event) {
        this.state.form[event.target.name] = event.target.value;

        this.setState({form: this.state.form});
    },
    onChangeArrayItem: function(key) {
    		return (event) => {
          console.log(event.target.name)
          console.log(key)
          console.log(event.target.value)
          this.state.form[event.target.name][key] = event.target.value;

          this.setState({form: this.state.form});
        }
    },
    addBullet: function(event) {
    	event.preventDefault();
      alert("hi");
      this.state.form[event.target.name].push("");
      this.setState({form:...