Rob Cable Rob Cable - 1 year ago 36
CSS Question

REACT: Edit existing selected images in a slideshow

I am working on a slideshow app and am using viewerJS for the plug in. I have the ability to create slideshows and save all selected images. However, now I am working on the ability to go back and edit each individual slideshows. I would like to be able to remove or add images from the slideshow. Here is the code for that frame below:

var CreateUpdateShowComponent = React.createClass({
getInitialState: function(){
return {
momentCollection: [],
moment: [],
'slideshow': new SlideShow()
componentWillMount: function(){
var self = this;
var momentCollection = new MomentCollection();
var slideshow = this.state.slideshow;

self.setState({'momentCollection': momentCollection})

slideshow.set('id', self.props.slideshowId);

var slideshowIds = slideshow.get("moments").map(function(moment){return})
console.log("momentCollection is ", momentCollection);
'slideshow': slideshow,
'title': slideshow.get('title'),
'description': slideshow.get('description'),


handleChange: function(moment){
var self = this;
console.log("moment is",moment);
var isSelected = moment.get('selected');
moment.set("selected", !isSelected);
// re-render here
handleTitleChange: function(e){
handleDescriptionChange: function(e){
// var slideshow = slideshow.get('description')
handleSave: function(){
var self = this;
/ Build an array of the selected image ids
var selectedMoments = _.pluck(this.state.momentCollection.where({selected: true}), 'id');
// Create new slideshow
var slideshow = this.state.slideshow;
'title': this.state.title,
'description': this.state.description,
'moment_ids': selectedMoments,
self.props.router.navigate('slide', {trigger: true});
handleSelectedState: function(moment, e){
moment.set("selected", !moment.get("selected"))

render: function(){
var self = this;

var momentListDisplay =, index){
return (
<li className={"image-thumb col-xs-2 " + (moment.get('selected') ? 'active' : '')} data-moment-id={moment.get("id")} onClick={function(){ self.handleSelectedState(moment) }} key={index}>
<label className="image-holder" htmlFor={index}>
<div className="select-indicator">
<div className={moment.get("selected") ? "active-indicator active" : "active-indicator"}></div>
<img className={moment.get("selected") ? "slideshow-image selected" : "slideshow-image"} width={moment.getThumbWidth()} height={moment.getThumbHeight()} src={moment.get("dropbox_path")}></img>

Answer Source

Your code is very messy. To be able to add or delete a slide, you must create a handler for these actions and, in the handler, edit the state, like this:

addSlide: function(slide, id, etc..) {

Then just call addSlide with the correct params that you need to create a slide. You can "attach" the addSlide handler to a HTML button.

Remember to always use the this.setState() React method, because this method will update the HTML view.