Click on a different li to switch the content of the Content, please how to achieve, I write this can not change why?

   

Mar.24,2021

Why is it so complicated to write?

import React, { Component } from 'react'
import './styles.css'

class App extends Component {
  constructor() {
    super()
    this.state = {
      list: ['A', 'B', 'C', 'D'],
      current: 0,

      content: [
        ['img a-1', 'img a-2', 'img a-3'],
        ['img b-1', 'img b-2', 'img b-3'],
        ['img c-1', 'img c-2', 'img c-3'],
        ['img d-1', 'img d-2', 'img d-3']
      ]
    }
  }

  handleClick = index => this.setState({ current: index })

  render() {
    return (
      <div className="tab-panel">
        <ul className="tabs">
          {this.state.list.map((v, i) => (
            <li
              key={v}
              className={i === this.state.current ? 'active' : ''}
              onClick={() => this.handleClick(i)}
            >
              {v}
            </li>
          ))}
        </ul>

        <ul className="content-container">
          {this.state.content.map(
            (v, i) =>
              v.length && (
                <li key={i} className={i === this.state.current ? 'show' : 'hidden'}>
                  {v.map((img, index) => <img key={index} src={img} alt={img} />)}
                </li>
              )
          )}
        </ul>
      </div>
    )
  }
}

export default App
Menu