React writing method - Codes Helper - Programming Question Answer

React writing method

I want to know if there is any abbreviated way to write this react code. I don"t know how to write react, for the first time. I hope you can help me.

class Paging extends Component {

  constructor(props){
    super(props)
    this.state={
      visibleA:true,
      visibleB:false,
      visibleC:false,
      visibleD:false,
      visibleE:false,
      visibleF:false,
      visibleG:false,
    }
  }

  change=(value)=>{
    if(value===1){
      this.setState({
        visibleA:true,
        visibleB:false,
        visibleC:false,
        visibleD:false,
        visibleE:false,
        visibleF:false,
        visibleG:false,
      })
    }else if(value === 2){
      this.setState({
        visibleB:true,
        visibleA:false,
        visibleC:false,
        visibleD:false,
        visibleE:false,
        visibleF:false,
        visibleG:false,
      })
    }else if(value === 3){
      this.setState({
        visibleC:true,
        visibleA:false,
        visibleB:false,
        visibleD:false,
        visibleE:false,
        visibleF:false,
        visibleG:false,
      })
    }else if(value === 4){
      this.setState({
        visibleD:true,
        visibleA:false,
        visibleB:false,
        visibleC:false,
        visibleE:false,
        visibleF:false,
        visibleG:false,
      })
    }else if(value === 5){
      this.setState({
        visibleE:true,
        visibleA:false,
        visibleB:false,
        visibleC:false,
        visibleD:false,
        visibleF:false,
        visibleG:false,
      })
    }else if(value === 6){
      this.setState({
        visibleF:true,
        visibleA:false,
        visibleB:false,
        visibleC:false,
        visibleD:false,
        visibleE:false,
        visibleG:false,
      })
    }else if(value === 7){
      this.setState({
        visibleG:true,
        visibleA:false,
        visibleB:false,
        visibleC:false,
        visibleD:false,
        visibleE:false,
        visibleF:false,
      })
    }

  }

  render() {
    return (
      <div id="paging">
          <ul>
              <li><span className={this.state.visibleA === true ? "paging_touch":null} onClick={()=>this.change(1)}></span></li>
              <li><span className={this.state.visibleB === true ? "paging_touch":null} onClick={()=>this.change(2)}></span></li>
              <li><span className={this.state.visibleC === true ? "paging_touch":null} onClick={()=>this.change(3)}></span></li>
              <li><span className={this.state.visibleD === true ? "paging_touch":null} onClick={()=>this.change(4)}></span></li>
              <li><span className={this.state.visibleE === true ? "paging_touch":null} onClick={()=>this.change(5)}></span></li>
              <li><span className={this.state.visibleF === true ? "paging_touch":null} onClick={()=>this.change(6)}></span></li>
              <li><span className={this.state.visibleG === true ? "paging_touch":null} onClick={()=>this.change(7)}></span></li>
          </ul>
      </div>
    );
  }
}
  
  export default Paging;

I want to know if there is any abbreviated way to write this react code. I don"t know how to write react, for the first time. I hope you can help me.

React.js

Mar.23,2021

<ul> {visibleList.map((item, key) => <li key={key}><span className={this.state.visibleIndex === item.id ? 'paging_touch' : null} onClick={() => this.change(item.id)}>{item.name}</span></li>) } </ul> </div> ); } }