How to set the states in react before again using it?

Question

import { useState } from 'react'
import './Events.css'

export default function Events() {
    const [position, setImgPos] = useState('0')
    const [display, setDisplay] = useState('')
    const [left, setLeft] = useState('-100%')

    const stylesImg = {
        left: position
    };
    const stylesTitle = {
        display: display,
    };
    const stylesDesc = {
        left: left
    };
    

    return (
        <div className='events-box'>
            <div className='event'
             onMouseLeave={() => {
                setImgPos('0');
                setTimeout(() => {
                    setDisplay('');
                }, 500)
                setLeft('-100%')
            }} >
                <img style={stylesImg}
                    onMouseEnter={() => {
                        setImgPos('60vw');
                        setDisplay('none');
                        setLeft('0')
                    }}
                    src="https://www.w3schools.com/css/img_forest.jpg"
                />
                <p style={stylesTitle} className='event-title'>RoboWars</p>
                <p style={stylesDesc} className='event-desc'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium minus neque mollitia voluptates aliquid voluptas cupiditate! Aliquam modi sint nulla eos excepturi ab repellat accusamus id eius facere, soluta minus.</p>
            </div>

            <div className='event'
             onMouseLeave={() => {
                setImgPos('0');
                setTimeout(() => {
                    setDisplay('');
                }, 500)
                setLeft('-100%')
            }} >
                <img style={stylesImg}
                    onMouseEnter={() => {
                        setImgPos('60vw');
                        setDisplay('none');
                        setLeft('0')
                    }}
                    src="https://www.w3schools.com/css/img_forest.jpg"
                />
                <p style={stylesTitle} className='event-title'>RoboWars</p>
                <p style={stylesDesc} className='event-desc'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium minus neque mollitia voluptates aliquid voluptas cupiditate! Aliquam modi sint nulla eos excepturi ab repellat accusamus id eius facere, soluta minus.</p>
            </div>
        </div>
    )
}


.events-box {
    margin-top: 20px;
}

.event {
    background-color: #3B3B3B;
    display: flex;
    align-items: center;
}

img {
    width: 40vw;
    height: 40vh;
    position: relative;
    transition: 1s;
}

.event-title {
    margin: auto;
    color: #fff;
    font-size: 2em;
    position: relative;
}

.event-desc {
    position: fixed;
    font-size: 1em;
    color: white;
    width: 60vw;
    padding: 20px;
    margin: auto;
    transition: 1s;
}

I have made to div for sliding the image and showing some text when we move the mouse in and out.

The problem is that when I slide on one div, the changes happen on the other div too.

Here, when i hovered over the first div, the 2nd div also shifted, but I don't want that to happen:

Answer 1

Just use different state, check this:

export default function Feed() {
  const [position, setImgPos] = useState('0')
  const [display, setDisplay] = useState('')
  const [left, setLeft] = useState('-100%')
  const [position2, setImgPos2] = useState('0')
  const [display2, setDisplay2] = useState('')
  const [left2, setLeft2] = useState('-100%')

  const stylesImg = {
      left: position
  };
  const stylesTitle = {
      display: display,
  };
  const stylesDesc = {
      left: left
  };


  const stylesImg2 = {
    left: position2
  };
  const stylesTitle2 = {
      display: display2,
  };
  const stylesDesc2 = {
      left: left2
  };

  return (
      <div className='events-box'>
          <div className='event'
            onMouseLeave={() => {
              setImgPos('0');
              setTimeout(() => {
                  setDisplay('');
              }, 500)
              setLeft('-100%')
            }} >
              <img style={stylesImg}
                  onMouseEnter={() => {
                      setImgPos('60vw');
                      setDisplay('none');
                      setLeft('0')
                  }}
                  src="https://www.w3schools.com/css/img_forest.jpg"
              />
              <p style={stylesTitle} className='event-title'>RoboWars</p>
              <p style={stylesDesc} className='event-desc'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium minus neque mollitia voluptates aliquid voluptas cupiditate! Aliquam modi sint nulla eos excepturi ab repellat accusamus id eius facere, soluta minus.</p>
          </div>



          <div className='event'
            onMouseLeave={() => {
              setImgPos2('0');
              setTimeout(() => {
                  setDisplay2('');
              }, 500)
              setLeft2('-100%')
          }} >
              <img style={stylesImg2}
                  onMouseEnter={() => {
                      setImgPos2('60vw');
                      setDisplay2('none');
                      setLeft2('0')
                  }}
                  src="https://www.w3schools.com/css/img_forest.jpg"
              />
              <p style={stylesTitle2} className='event-title'>RoboWars</p>
              <p style={stylesDesc2} className='event-desc'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium minus neque mollitia voluptates aliquid voluptas cupiditate! Aliquam modi sint nulla eos excepturi ab repellat accusamus id eius facere, soluta minus.</p>
          </div>
      </div>
  )
}

Or you can only play with css, just make 1 state for example using boolean "isActive" state, when isActive then add new class. Below full code:

import { useState } from "react";
import styles from './feed.module.css';

const content = [
    {
        image: "https://www.w3schools.com/css/img_forest.jpg",
        title: "RoboWars",
        desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit."
    },
    {
        image: "https://www.w3schools.com/css/img_forest.jpg",
        title: "RoboWars 2",
        desc: "Another Lorem ipsum dolor sit amet consectetur adipisicing elit."
    }
]

export default function Feed() {
  const [isActive, setIsActive] = useState(-1);

  return (
      <div className='events-box'>
        {content.map((build, i) => {
            return (<div className='event'>
            <img className={isActive===i ? styles.activeImg : styles.stylesImg}
                onMouseEnter={() => setIsActive(i)}
                src={build.image}
            />
            <p className={`${isActive===i ? styles.activeTitle : styles.stylesTitle} ${styles.eventTitle}`}>{build.title}</p>
            <p className={`${isActive===i ? styles.activeDesc : styles.stylesDesc} ${styles.eventDesc}`}>{build.desc}</p>
        </div>);
        })}
      </div>
  )
}

and add this to your css files:

.stylesImg {
  left: 0;
 }
.stylesTitle {
  display: '';
 }
.stylesDesc {
  left: -100%;
 }

.activeImg {
  left: 60vw;
 }
.activeTitle {
  display: none;
 }
.activeDesc {
  left: 0;
 }