i'm using react , meteor generate table of information items in catalog. made form users can add new items. each item has name, price , manufacturer. works fine when make inputs text areas, want make manufacturer input tags generated according meteor collection called manufacturers.
form = react.createclass({ proptypes: { manufacturer: react.proptypes.object.isrequired }, renderoptions(){ return(<option value={this.props.manufacturer.name}>{this.props.manufacturer.name}</option>); }, submititem(event){ event.preventdefault(); var name=react.finddomnode(this.refs.nameinput).value.trim(); var price=react.finddomnode(this.refs.priceinput).value.trim(); var manufacturer=react.finddomnode(this.refs.manufacturerinput).value.trim(); items.insert({ name: name, price: price, manufacturer: manufacturer, }); react.finddomnode(this.refs.nameinput).value=""; react.finddomnode(this.refs.priceinput).value=""; }, render(){ return( <footer> <form classname="new-item" onsubmit={this.submititem}> <input type="text" ref="nameinput" placeholder="name" required /> <input type="text" ref="priceinput" placeholder="price" required /> <button onclick={this.submititem}>add</button> </form> <select ref="manufacturerinput" defaultvalue="" required /> <option value="" disabled>manufacturer</option> {this.renderoptions()} </select> </footer> ); } }); how make work? i've been pulling hair out day trying figure out, meteor keeps telling me "expected corresponding jsx closing tag (38:8)". doing wrong here? works fine when they're destroys entire app.
you accidentally closed select element here:
<select ref="manufacturerinput" defaultvalue="" required /> remove /.
Comments
Post a Comment