javascript - Reactjs Meteor: Error when returning as object spread operator -
need i'm stuck code. gives error when returning object spread operator.
i'm trying sort score data mongodb. playersort function displays output. sortplayer function sorts sortplayers based on ranks. return data sortplayers using object spread operator gives me error.
const playersort = function(sortplayers) { return sortplayers.map(function(plist, index) { return ( < p key = { index } > { plist.name } scores { plist.score } { plist.rank } < button onclick = { function() { players.update({ _id: plist._id }, { $inc: { score: 1 } }) } } > +1 < /button> < button onclick = { function() { players.update({ _id: plist._id }, { $inc: { score: -1 } }) } } > -1 < /button> < /p>) }); }; const eventhandler = function(e) { let inputvalue = e.target.inputplayer.value; if (inputvalue) { e.target.inputplayer.value = ''; players.insert({ name: inputvalue, score: 0 }); } } export const sortplayers = function(playerrecord) { console.log(playerrecord.length); return playerrecord.map(function(prlist, index) { let rank = 1; if (index !== 0 && playerrecord[index - 1].score > prlist.score) { rank++ } return {...prlist, rank }; }) } meteor.startup(() => { tracker.autorun(() => { let playerrecord = players.find({}, { sort: { score: -1 } }).fetch(); console.log(playerrecord); let jsx = ( < div > { sortplayers(playerrecord) } { playersort(playerrecord) } < form onsubmit = { eventhandler } > < input type = "text" name = "inputplayer" placeholder = "input player" / > < button > add player < /button> < /form> < /div>) reactdom.render(jsx, document.getelementbyid('app')); }); }); error
invariant violation: objects not valid react child (found: object keys {_id, name, score, rank}). if meant render collection of children, use array instead or wrap object using createfragment(object) react add-ons
Comments
Post a Comment