javascript - Meteor and React not output data correctly. -
so trying output data paint , getting [object,object]. tried adding .tostring() no luck. appreciated.
i know means there objects inside of arrays don't know generating array and/or how reformat that.
class paintpage extends component { constructor(props) { super(props); this.state = {}; this.handlesubmit = this.handlesubmit.bind(this); //brads cool } handlesubmit(e) { e.preventdefault(); paint.insert({ brand: this.refs.brand.value, color: this.refs.color.value, sheen: this.refs.sheen.value, room: this.refs.room.value }); } render() { var paintarr = paint.find().fetch(); paintarr.map((room, index) => <div classname="row"> <div classname="col-xs-2"> <li classname="list-group-item text-center" key={room}> {paintarr} </li> </div> </div> ); return ( <div> <div classname="row"> <div classname="col-xs-4"> <productnav /> </div> </div> <form classname="form" onsubmit={this.handlesubmit}> <div classname="row"> <div classname="col-xs-4" /> <div classname="col-xs-4"> <label htmlfor="brand" classname="input"> paint brand </label> <div classname="field"> <input type="text" name="brand" classname="form-control" placeholder="brand/company" ref="brand" value={this.props.value} onchange={this.props.onchange} /> </div> </div> </div> <div classname="row"> <div classname="col-xs-4" /> <div classname="col-xs-4"> <label htmlfor="color" classname="input"> color </label> <div classname="field"> <input type="text" name="brand" classname="form-control" placeholder="color" ref="color" value={this.props.value} onchange={this.props.onchange} /> </div> </div> </div> <div classname="row"> <div classname="col-xs-4" /> <div classname="col-xs-4"> <label htmlfor="brand" classname="input"> sheen </label> <div classname="field"> <input type="text" name="brand" classname="form-control" placeholder="sheen" ref="sheen" value={this.props.value} onchange={this.props.onchange} /> </div> </div> </div> <div classname="row"> <div classname="col-xs-4" /> <div classname="col-xs-4"> <label htmlfor="room" classname="input"> room </label> <div classname="field"> <input type="text" name="room" classname="form-control" placeholder="room" ref="room" value={this.props.value} onchange={this.props.onchange} /> </div> </div> </div> <div classname="row"> <div classname="col-xs-12"> </div> <input classname="btn btn-primary btn-lg button-buffer" type="submit" value="input" /> </div> </form> <div> <div> <ul classname="list-group"> {paintarr.tostring()} </ul> </div> </div> </div> ); } } export default paintpage;
you printing whole array because use variable {paintarr}
instead of current element of map function. should (assuming want print color):
var painter = paint.find().fetch(); paintarr.map((entry, index) => <div classname="row"> <div classname="col-xs-2"> <li classname="list-group-item text-center" key={entry.room}> {entry.color} </li> </div> </div> );
note key={room}
key={entry.room}
because room attribute of current element in array.
if still don't know going on here, may further research array.map function , how works.
Comments
Post a Comment