First time using React-Transition-Group - css

Question

I have a image viewer component that as one large image and 3 smaller ones below it. When you hover over one of the bottom images it changes the large image to the corresponding image. I would like to add a fade-in/fade-out transition when the larger image changes. So far I can get a fade-in and a fade-out on the mouse completely leaving the smaller image but, not hovering between the images. Here is my code:
import React, { Component } from 'react';
import Transition from 'react-transition-group/Transition'
import Image0 from './Image1.jpg'
import Image1 from './Image2.jpg'
import Image2 from './Image3.jpg'
import './ImageViewer.css';
const duration = 300;
const Images = [Image0, Image1, Image2]
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}
const transitionStyles = {
entering: { opacity: 1 },
entered: { opacity: 1 },
exiting: { opacity: .9 },
exited: { opacity: 0.01 }
};
const Fade = ({ in: inProp, currentImage }) => (
<Transition in={inProp} timeout={duration}>
{(state) => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
<img src={currentImage}/>
</div>
)}
</Transition>
);
class App extends Component {
state = { show: false, currentImg: Images[0] }
handleClick = e => {
this.setState({
show: !this.state.show,
currentImg: Images[Number(e.currentTarget.dataset.id)]
})
}
render() {
return (
<div className="App">
<Fade in={this.state.show} currentImage={this.state.currentImg}/>
<div className="small_image_wrapper">
<img className="small_image"
src={Image0}
alt="A wonderful bed"
data-id={0}
onMouseOver={this.handleClick}
onMouseOut={this.handleClick}
/>
<img className="small_image"
src={Image1}
alt="A wonderful bed"
data-id={1}
onMouseOver={this.handleClick}
onMouseOut={this.handleClick}
/>
<img className="small_image"
src={Image2}
alt="A wonderful bed"
data-id={2}
onMouseOver={this.handleClick}
onMouseOut={this.handleClick}
/>
</div>
</div>
);
}
}
export default App;
Also here's a link to what I have so far with transitions:
https://peaceful-jones-ee2ca2.netlify.com/
And without transitions:
https://practical-lamport-9cc94e.netlify.com/

Answer 1

I am not sure but you have to wrap all your images into TransitionGroup
import {TransitionGroup}, {Transition} from 'react-transition-group';
...
render() {
return (
<div className="App">
<TransitionGroup>
<Fade in={this.state.show} currentImage={this.state.currentImg}/>
</TransitionGroup>
<div className="small_image_wrapper">
/* here comes small images */
</div>
</div>
)};