React js : Change img on Div whith onMouseOver

I need your help :) (but first, sorry for my aproximate english ...).

I would like to change the 'img src' in the 'div-img' when I pass the mouse over one of the 'a' balise ... I try onMouseOver, but i failled :(

There is an image by 'a' which replaces the one in 'div-img'

EDIT : Okay, here is the almost complete code, to really see the problem :

@observer
export default class Home extends React.Component {
  static readonly language = "language";
  private static readonly en = "en";
  private static readonly fr = "fr";

  @observable private static selectLanguage = false;

  public render(): ReactElement {
    if (Home.selectLanguage) {
      return (
        <div style={{ height: '100vh', width: '100vw', overflow: 'hidden'}}>
          <MyHead />
          <body style={{backgroundColor: 'rgb(51, 63, 72)'}}>
            <div style={{ 
              maxWidth: '1150px',
              height: '300px',
              margin: 'auto',
             }}>
               <div style={{ display: 'flex', maxWidth: '450px'}}>
                <img style={{
                  maxWidth: '100%',
                  margin: 'auto'
                }}
                src='/images/***.png'/>
               </div>
            </div>

            <div style={{
              display: 'flex',
              flexWrap: 'wrap',
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              zIndex: 1,
              }}>

              <a href="/fr/" onClick={_ => { localStorage.setItem(Home.language, Home.fr); }} >
                <span className= 'shadow'>
                  <div style={{ margin: '0 15px', padding: '75px', backgroundColor: 'rgb(175, 39, 47)', clipPath: 'polygon(0 0, 100% 8%, 100% 92%, 0 100%)'}} >  
                    <h2>Français</h2>
                  </div>
                </span>
              </a>

              <a href="/en/" onClick={_ => {localStorage.setItem(Home.language, Home.en);}}>
                <span className= 'shadow'>
                  <div style={{ margin: '0 15px', padding: '75px', backgroundColor: 'rgb(175, 39, 47)', clipPath: 'polygon(0 8%, 100% 0, 100% 100%, 0 92%)'}}>
                    <h2>English</h2>
                  </div>
                </span>
              </a>

            </div>

            <main style={{filter: 'blur(4px)'}}>
              <component1 />
              <component2 />
            </main>

          </body>
        </div>
      )
    }

Thank you very much in advance !

Solution

I have made a few changes to your code, first of all, I am using mouseOnEnter instead of mouseOnHover and I have also added mouseOnLeave to reset the image(because in the question you have mentioned that you want to change the image when you pass over the (Link) tag.

My solution uses the useState react hook, onMouseEnter for the div sets a random image using

https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg

https://i.picsum.photos/id/{image_id}/{width}/{height}.jpg

https://i.picsum.photos/id/50/50/50.jpg

OnMouseEnter the state is updated to the images src / location and is reset to '' onMouseLeave. Also, I have added

style={{ width: '50px', height: '50px' }}

to the div so as to keep the divs from moving around when hovering over links in the sample code. 50px is also the height of the image.

import React, { useState } from 'react'

const testCode = () => {
const [image, setImage] = useState('')
return (
    <>
      <div className="div-img" style={{ width: '50px', height: '50px' }}>
        <img src={image} />
      </div>
      <div>
        <a href="/fr/" onMouseEnter={() => setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)} onMouseLeave={() => setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
        </a>
        <a href="/en/" onMouseEnter={() => setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)} onMouseLeave={() => setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
        </a>
      </div>
    </>
  )
}

export default testCode

Updated: Using React Class

import React, { Component } from 'react'

class sampleCode extends Component {

  constructor(props) {
    super(props);
    this.state = { image: '' };
  }

  setImage = (imagePath) => {
    this.setState({ image : imagePath })
  }

  render() {
    return (
      <>
        <div className="div-img" style={{ width: '50px', height: '50px' }}>
          <img src={this.state.image}/>
        </div>
        <div>
          <a href="/fr/"
             onMouseEnter={() => this.setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)}
             onMouseLeave={() => this.setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
          </a>
          <a href="/en/"
             onMouseEnter={() => this.setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)}
             onMouseLeave={() => this.setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
          </a>
        </div>
      </>
    )
  }
}

export default sampleCode

Hope this helps :)