I am currently utilizing Bootstrap 3 and I have a requirement to clear each .row once 12 columns have been generated. However, my code is not working as expected and I encounter this error:
Failed to compile. Error in ./src/File/file.js Syntax error: Unexpected token, expected , (145:56)
The issue lies on this line:
{ index % 4 == 0 && <div className="row"> }const TweetImageList = ({images, removeImage}) => {
return (
<div className="TweetImageList">
<ReactCSSTransitionGroup transitionName="tweetImageTransition"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}>
{
images.map((image, index) => {
let column =
<div key={index} className="col-xs-3 tweet-image-wrapper">
<TweetImage
image={image}
removeImage={removeImage}
/>
</div>;
return column;
})
}
</ReactCSSTransitionGroup>
</div>
);
};
It is indeed necessary to clear the row sometimes because it does not automatically clear itself as implied in the BS documentation. For more information, refer to this link:
!! UPDATE !!
I have revised my jsx based on Yo Wakita's suggestion. Floats are now cleared with rows. However, transitions are no longer functioning properly... Any suggestions??????
const TweetImageList = ({images, removeImage}) => {
return (
<div className="TweetImageList">
{
_.chunk(images, 4).map((chunk, i) => {
return (
<div key={i} className="row spacing-bottom">
{
chunk.map((image, j) => {
return (
<div key={j} className="col-xs-3">
<ReactCSSTransitionGroup transitionName="tweetImageTransition"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}>
<TweetImage
image={image}
removeImage={removeImage}/>
</ReactCSSTransitionGroup>
</div>
)
})
}
</div>
)
})
}
</div>
);
};
removeImage()
removeImage(id) {
this.setState({
images: this.state.images.filter(function (img) {
return img.id !== id;
}),
startValue: this.state.startValue + this.numPhotoChars
});
}