javascript - How to delete elements with react? (Basic React query) -
i'm total newbie react , trying build app react, after many hours of trying, couldn't figure out why elements want delete onclick aren't getting deleted.
there 2 similar posts on this, need use independent keys every element. tried that, created different variable , increment after every use. it deletes top element of list.
how works - 1) have array stored names channels, , data names , save data array renderall.
2) after filter on how want render them, , render them function rendercards(). renders button if clicked, should delete channel channel array , respective data renderall array
3) have input field can add more channels.
what doesn't work - delete button deletes top element instead of element clicked.
i have app running without delete functionality
var app = react.createclass({ getinitialstate() { return { status: 2 } }, changestatus(i) { this.setstate({ status: }); }, render() { return ( <div> <header><h1>twitch streamers</h1></header> <tabs status = {this.changestatus} /> <cards status = {this.state.status} /> </div> ); } }); const cards = react.createclass({ getinitialstate() { return { renderall: [], check: this.props.status, channels: ["freecodecamp", "storbeck", "habathcx","meteos","robotcaleb","noobs2ninjas","brunofin","comster404","cretetion","sheevergaming","tr7k","ogamingsc2","esl_sc2"] }; }, //ajax request function getdata(last) { if(last === undefined) { for(let =0; i<this.state.channels.length;i++) { let channel = this.state.channels[i]; $.getjson("https://api.twitch.tv/kraken/streams/" + channel, (data) => { $.getjson("https://api.twitch.tv/kraken/channels/" + channel, (logo) => { if(data.hasownproperty(status) === false) { if(data.stream === null) { this.setstate({ renderall: this.state.renderall.concat([{channel: channel, url: `https://www.twitch.tv/${channel}`, status: 'offline', logo: logo.logo}]) }); } else { this.setstate({ renderall: this.state.renderall.concat([{channel: data.stream.channel.name, url: `https://www.twitch.tv/${channel}`, current: data.stream.channel.game + ' - ' + data.stream.channel.status, status: 'online', logo: logo.logo}]) }); } } }); }) .fail((jqxhr) => { this.setstate({ renderall: this.state.renderall.concat([{channel: channel, status: 'closed'}]) }); }); } } else { let channel = this.state.channels[this.state.channels.length - 1]; $.getjson("https://api.twitch.tv/kraken/streams/" + channel, (data) => { $.getjson("https://api.twitch.tv/kraken/channels/" + channel, (logo) => { if(data.hasownproperty(status) === false) { if(data.stream === null) { this.setstate({ renderall: this.state.renderall.concat([{channel: channel, url: `https://www.twitch.tv/${channel}`, status: 'offline', logo: logo.logo}]) }); } else { this.setstate({ renderall: this.state.renderall.concat([{channel: data.stream.channel.name, url: `https://www.twitch.tv/${channel}`, current: data.stream.channel.game + ' - ' + data.stream.channel.status, status: 'online', logo: logo.logo}]) }); } } }); }) .fail((jqxhr) => { this.setstate({ renderall: this.state.renderall.concat([{channel: channel, status: 'closed'}]) }); }); } }, componentwillmount() { this.getdata(); }, componentwillreceiveprops(prop) { this.setstate({ check: prop }); }, //delete function doesn't work delete(index) { let newarr = this.state.channels.slice(); let newarrsecond = this.state.renderall.slice(); newarr.splice(index, 1); newarrsecond.splice(index, 1); this.setstate({ channels: newarr, renderall: newarrsecond }); }, //render cards function rendercards(i) { if(i === 0 || i.status === 0) { let cards = this.state.renderall.map((item, i) => { if(item.status === 'online') { return <div classname="online cards" key={i}><img src={item.logo} width="30px" height="30px" /><a target="_blank" href={item.url}><h3>{item.channel}</h3></a><button classname="cross" onclick={this.delete}>✕</button><p>{item.current}</p></div> } }); return ( cards ) } else if(i === 1 || i.status === 1) { let cards = this.state.renderall.map((item, i) => { if(item.status === 'offline') { return <div classname="offline cards" key={i}><img src={item.logo} width="30px" height="30px"/><a target="_blank" href={item.url}><h3>{item.channel}</h3></a><button classname="cross" onclick={this.delete}>✕</button><p>channel offline</p></div> } }); return ( cards ) } else if(i === 2 || i.status === 2) { let cards = this.state.renderall.map((item, i) => { if(item.status === 'offline') { return <div classname="offline cards" key={i}><img src={item.logo} width="30px" height="30px" /><a target="_blank" href={item.url}><h3>{item.channel}</h3></a><button classname="cross" onclick={this.delete}>✕</button><p>channel offline</p></div> } else if(item.status === 'online') { return <div classname="online cards" key={i}><img src={item.logo} width="30px" height="30px" /><a target="_blank" href={item.url}><h3>{item.channel}</h3></a><button classname="cross" onclick={this.delete}>✕</button><p>{item.current}</p></div> } else { return <div classname="closed cards" key={i}><h3>{item.channel}</h3><p>account closed</p></div> } }); return ( cards ) } }, newchannel(i) { if(i.keycode === 13) { this.setstate({channels: this.state.channels.concat([i.target.value])}, function() { this.getdata(1); }); } }, leave(i) { i.target.value = ''; }, render() { return ( <div id="cards-inside"> <input type='text' placeholder="+ channel" onkeydown={this.newchannel} onblur={this.leave}/> <reactcsstransitiongroup transitionname="example" transitionentertimeout={500} transitionleavetimeout={300}> {this.rendercards(this.state.check)} </reactcsstransitiongroup> </div> ) } }); reactdom.render(<app />, document.getelementbyid("container-second"));
your index 0, because not pass when call delete.
therefore deletes top element.
inside jsx bit render x, should do:
onclick={this.delete.bind(this, i)} or try
onclick={() => {this.delete(i)} } to pass index of card clicked.
Comments
Post a Comment