React Practice 13: 02_07_ simple tab

Online Effects Browser:

Requirements: When mouseover labels, automatic switching content

Analysis: setting a boolean value, for switching the like Add / Remove, to show / hide the corresponding content

import React,{useState} from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Simplecard(props){
    const [lessons,setLesson]=useState(props.lessons);
    const handleOver=function(index){
        var newlessons=[...lessons];
        for(var i=0;i<newlessons.length;i++) newlessons[i].isActive=false;
        newlessons[index].isActive=true;
        setLesson(newlessons);
    }
    return(
        <div id="outer">
            <ul id="tab">
                {lessons.map((lesson,index)=>
                <li key={lesson.name} className={lesson.isActive ? 'current' : ''}
                onMouseOver={()=>handleOver(index)}>
                    {lesson.name}
                </li>
                )}
            </ul>
            <div id="content">
                {lessons.map((lesson,index)=>
                <ul key={index} className={lesson.isActive ? 'current' : ''}>
                    {lesson.content.map((content)=>
                    <li key={content}>
                        Content} {
                     </ Li>
                     )}
                 </ UL>
                 )}
             </ div> 
        </ div>     ) 
} 
const Lessons = [ 
    { 
        name: 'first class' , 
        Content: [ ' netnew analysis principle ' ,
         ' response user Action ' ,
         ' balloon effect ' ,
         ' event-driven ' ,
         ' element attribute manipulation ' ,
         ' start writing your first JS effects ' ,
         ' import functions ' ,
         ' page peels effect ' ,
         'Expansion / contraction playlist effect ' 
        ], 
        isActive:


        to true 
      }, 
      { 
        name: "Lesson ' , 
        Content: [
         ' change the background color of the page ' ,
         ' transfer function parameters ' ,
         ' high reusability write function ' ,
         ' 126 Mailbox Select effect ' ,
         ' loop traversal and ' ,
         ' using simple debugger ' ,
         ' typical cycle configuration ' ,
         ' mating loop for determining if ' ,
         ' className use ' ,
         ' the use of the innerHTML ' ,
         ' Cannes impression effect ' ,
         ' array ' ,
         ' string connection ' 
        ], 
        isActive:false
      },
      {
        name:'Lesson' , 
        Content: [
         'composed of the JavaScript: ECMAScript, DOM, BOM, JavaScript compatibility source' ,
         'the JavaScript to appear, advantages and disadvantages of' ,
         'variable type, typeof, data type conversion, variable scope' ,
         'closures: What is the closure, a simple application, the closure shortcomings' ,
         ' operator: arithmetic, assignment, relationships, logic, other operators' ,
         'program flow control: determining, circulation, out of' ,
         'naming : naming and necessity, Hungary nomenclature ' ,
         ' Detailed function: the function configuration, call, event, transmission parameters, variable parameters, return value ' ,
         ' the use of timers: the setInterval, the setTimeout ' ,
         ' timer application: webmaster navigation station effect ' ,
         ' timer application: the autoPlay tab ' ,
         ' timer application: digital clock ' ,
         'Program debugging method '  
        ],
        isActive: false
      }
];



ReactDOM.render(
    <Simplecard lessons={lessons}/>,
    document.getElementById('root')
)