如何在 ReactJS 中的兄弟姐妹之间切换？

当按钮悬停时，我们如何使兄弟框显示为绿色？

我们可以使用名称索引来保持状态，以保持悬停按钮的序列号。当用户从按钮上离开鼠标时，状态将为空。并且基于状态的值，框将具有使其变为绿色的类。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

App.js 文件：现在在 App.js 中编写代码。应用程序是默认组件。

Javascript

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 = 
          

             {
                this.setState({ index: i });
             }}
             onMouseLeave={() => {
                this.setState({ index: null });
             }}  
            >
             Turn the box green
           
           

           
         
           
         ans.push(data)
      }
      return ans
    }
   
   
   
    render = () =>{
         
      const ans = this.fetchUI()
      return (
         

          {ans}
        
      );
    }
  }
     
  export default App

App.css：在 src 文件夹中添加 App.css 文件以创建框并使其变为绿色。

CSS

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

输出：