react write dynamic label, render method to determine how to use if else

In () the cyclic data render, depending on the different display label data

import React from 'react';


const quanList=[
        {
          id:1,
          buy_price:1,//购买券的价格
          quan_price:30,//可抵扣价格
          quanName:'仅限(学习机)商品使用',
          on_time:'2020-11-01',
          off_time:'2020-11-30',
          isHave:false,
        },
        {
          id:2,
          buy_price:3,//购买券的价格
          quan_price:30,//可抵扣价格
          quanName:'通用券',
          on_time:'2020-11-01',
          off_time:'2020-11-30',
          isHave:true,
        },
];

export default class QuanList extends React.Component{

  constructor(props){
    super(props);
    this.state={
      data:quanList,
    }
  }



  render(){
    return(
      <div className="mui-content">
            <div style={{marginTop:'12px'}}>
              {this.state.data.map(quan=>(
                  <div className='ling_ticket2' key={quan.id}>
                      <div className='cont'>
                          <div className='numbers'>&yen;<span className='num'>{quan.buy_price}</span>（可抵扣{quan.quan_price}元）</div>
                          <div className='manjian'>{quan.quanName}</div>
                          <div className='manjian'>{quan.on_time} 至 {quan.off_time}</div>
                      </div>
                      <div className='state'>
                        {quan.isHave ? <div style={{paddingTop:'18px'}}>已<br/>领<br/>完</div> : <a href="lingqu(id)" key='lingqu_id' style={{color:'#fff'}}>立<br/>即<br/>领<br/>取</a>}
                          {/* <div style={{paddingTop:'18px'}}>已<br/>领<br/>完</div> */}
                          {/* <a href="lingqu(id)" key='lingqu_id' style={{color:'#fff'}}>立<br/>即<br/>领<br/>取</a> */}
                      </div>
                  </div>
              ))}
                
            </div>
      </div>
    )
  }

}