React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.61.10/semantic-ui-react.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

class RulesThenDropdown extends React.Component {

    constructor(){
      super()
      this.state = {}
    }
    

    componentDidMount(){
        this.props.onChange(this.props.id, "");
    }


	render() {
      
    let extra = "";

    const removeBtn = <button onClick={(e,m)=>this.props.remove(e,this.props.id)} className="circular ui icon button"><i className="icon minus"></i></button>  

    const addBtn = <button onClick={(e,m)=>this.props.add(e,this.props.id)} className="circular ui icon button"><i className="icon plus"></i></button>

    if(this.props.first==="false"){
      if(this.props.hideAdd=="true"){
         extra = removeBtn;
      }else{
         extra = <div>{addBtn}{removeBtn}</div>;
       }
    }else if(this.props.first==="true"){
      if(this.props.hideAdd!="true"){
        extra = addBtn;
      }else{
        extra = removeBtn;
      }
    }

		return (
            <div style={{position: "relative"}}>
                <select selected={this.props.result} style={{height: "50px"}}>
                  <option value=""></option>
                  <option value="saab">Saab</option>
                  <option value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
                </select>
                <div style={{position: "absolute",
            left: "100%",
            top: "0px",
            minWidth: "180px",
            textAlign: "left",
            paddingLeft: "20px"}}>
                {
                    extra
                }
                </div>
            </div>
		)
	}
}

class RulesThenObj extends React.Component {
    constructor(props){
      super(props)
      this.state = {
         dropdown: [
             {first: "true", hideAdd: "false", result: ""}
         ]
      }
      this.addRow = this.addRow.bind(this);
      this.removeRow = this.removeRow.bind(this);
      this.onChange = this.onChange.bind(this);
    }

    onChange(key, value){
        let oldArray =...