Has anyone successfully implemented a function in react.js to change the image source based on the direction of an arrow click?
For instance, I have an array set up where clicking the right arrow should move to the next image and clicking the left arrow should go back to the previous image.
Below is my code snippet:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from '../actions/index';
import { Link } from 'react-router';
var i = 0;
var blogPostImages = ['./img/placeholder.jpg', './img/placeholderB.jpg', './img/placeholderC.png'];
export default class HomePage extends Component {
changeBlogPicForwards() {
if (i == blogPostImages.length - 1) {
i = 0;
} else {
i = i + 1;
}
let blogPostImages = blogPostImages[i];
}
changeBlogPicBackwards() {
if (i == 0) {
i = blogPostImages.length - 1;
} else {
i = i - 1;
}
}
render() {
var blogCurrentPic = this.state.blogPostImages[i];
return (
<div>
<div className="top-section-actions">
<div className="image-holder">
<img className="blog-pictures" src={blogPostImages}/>
</div>
<div className="blog-name">
<div className="left-arrow-action arrow-icons">
<i onClick={(e) => this.changeBlogPicForwards(e)} className="fa fa-arrow-circle-o-left fa-2x" aria-hidden="true"></i>
</div>
<div className="right-arrow-action arrow-icons">
<i onClick={(e) => this.changeBlogPicBackwards(e)} className="fa fa-arrow-circle-o-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
)
}
}
I'm encountering a persistent error while testing this function. Any guidance or advice would be greatly appreciated.