在React中的onMouseOver上显示不同的图像

Question

I'm looking to display a different image for every link I hover over. When I hover over each link, both images display on top of each other. I feel as if my issue stems from the conditional, which will show any image I place within it and not just one specific image.

I'm wondering if there's a better approach. Perhaps holding the images within the state?

My code:

class PhotoIndex extends Component {
state = {
    hover: false
}

mouseOver = () => {
    this.setState({ hover: true })
}

mouseOut = () => {
    this.setState({ hover: false })
}

render() {
    return (
        <Wrapper>
            <IndexWrapper>
                <li>
                    <StyledLink
                        onMouseOver={this.mouseOver}
                        onMouseOut={this.mouseOut}
                        to="/checkered-flag/">Checkered Flag

                        {this.state.hover
                            ?
                            <Fade >
                                <div style={{ position: 'relative' }}>
                                    <img 
                                        style={{ position: 'absolute', top: '-200px', left: '100%' }} 
                                        src={car14} 
                                        alt="red car parked in a parkin lot" 
                                    />
                                </div>
                            </Fade>
                            : null}
                    </StyledLink>
                </li>
                <li>
                    <StyledLink
                        onMouseOver={this.mouseOver}
                        onMouseOut={this.mouseOut}>
                        Birds Nest  

                        {this.state.hover
                            ?
                            <Fade >
                                <div style={{ position: 'relative' }}>
                                    <img 
                                        style={{ position: 'absolute', top: '-200px', left: '100%' }} 
                                        src={car15} 
                                        alt="blue car parked in a grassy field" 
                                    />
                                </div>
                            </Fade>
                            : null}                         
                    </StyledLink>
                </li>
                <li>
                    <StyledLink>The Grand Turret</StyledLink>
                </li>
                <li>
                    <StyledLink>Simulation Theory</StyledLink>
                </li>
            </IndexWrapper>
        </Wrapper>
    )
}

}

Answer 1

I will try to simplify the code to explain the solution. If you wish to go with this solution the images should be numbered in order with a set structure. For example car0.jpg ,car1.jpg, car2.jpg .....

ImageGetter.js

import car1 from './cars/car1.jpg';
import car2 from './cars/car2.jpg';

export default {
  car1,car2
}

In the above code I am importing the images and exporting them so they can be consumed by any component which uses the ImageGetter object.

PhotoIndex.js

import ImageGetter from './ImageGetter';

class PhotoIndex extends Component {
  constructor() {
    super();
    this.state = {
      carImgNum: '0',
      hover: false
    }
  }

  mouseOver = () => {
    const max = 5; //Max number of images
    const newcarImgNum = Math.floor(Math.random() * Math.floor(max));
    this.setState({ hover: true, carImgNum: newcarImgNum });
  }

  render() {
    const { carImgNum } = this.state;
    return (
        <div onMouseOver={this.mouseOver}>
          <img src={ImageGetter[`car${carImgNum}`]} alt="" />
        </div>
    )
  }
}

export default PhotoIndex;

You will have to create a default state for the number of the image which will be displayed. Over here the default image displayed will be car0.jpg.

In mouseOver function you will have to define how many images are available. (You can make the number of images dynamic with some other function too.). It then creates a random number from 0 to the max number you specified and sets the value to the carImgNum state.

Over in the render method I am de structuring the state to get the carImgNum value.

I then pass the ImageGetter into src of the image tag and dynamically target the image i need to pass using templatestrings.