¿Cómo alternar entre hermanos en ReactJS?

¿Cómo podemos hacer que el cuadro de hermanos aparezca verde cuando se desplaza el botón?

Podemos mantener un estado con un índice de nombre para mantener el número de secuencia de un botón flotante. Cuando el usuario deja el mouse desde el botón, el estado será nulo. Y según el valor del estado, la caja tendrá clases para volverla verde.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Archivo App.js: ahora escriba el código en App.js. La aplicación es el componente predeterminado.

import {React , Component} from 'react';
import './App.css'; 
class App extends Component{
      
    state = {
        index: null
      };
         
      fetchUI  = ()=> {
   
        let ans = [];
      for(let i=0;i<5;i++){
        const greenClass = (this.state.index === i) ? 'green' : '';
     
        const data = 
          <div>
            <button onMouseOver={() => {
                this.setState({ index: i });
             }}
             onMouseLeave={() => {
                this.setState({ index: null });
             }}  
            >
             Turn the box green
           </button>
           <div className={'box '+greenClass}>
           </div>
         </div>
           
         ans.push(data)
      }
      return ans
    }
   
   
   
    render = () =>{
         
      const ans = this.fetchUI()
      return (
         <div style = {{margin:100}}>
          {ans}
        </div>
      );
    }
  }
     
  export default App

App.css: agregue el archivo App.css en la carpeta src para crear el cuadro y hacerlo verde.

.box{
    border:1px solid rgb(194, 106, 106);
    height:20px;
    width:20px;
  }
  .green{
    background:green;
    cursor: pointer;
  }

Producción: