点击类似列表结构，显示出当前点击模块的详细信息

需求:点击类似列表结构，显示出当前点击模块的详细信息。这里展示的是table列表。点击是保存当前的index当作判断条件，展示当前的table列表

    const [tableTag, setTableTag] = useState(undefined);
      const listData = [
        {
          time: '1h30min',
          value: '45km',
        },
        {
          time: '1h32min',
          value: '45km',
        },
        {
          time: '1h33min',
          value: '45km',
        },
      ];
      
     const handleClick = (item, index) => {
        setTableTag(index);
     };

     <div className={styles.content}>
        {listData.map((item, index) => {
          return (
            <div>
              <div
                className={styles.listItem}
                onClick={() => handleClick(item, index)}
              >
                <div className={styles.listTime}>
                  <div>用时</div>
                  <div className={styles.time}>{item.time}</div>
                </div>
                <div className={styles.listDistance}>
                  <div>距离</div>
                  <div className={styles.distance}>{item.value}</div>
                </div>
              </div>
              {tableTag === index && (
                <Table
                  rowKey={(record) => record.planIndex}
                  columns={columns}
                  bordered={true}
                  dataSource={resourceList}
                  pagination={ totalNum > 10 ? resourcesPagination : false}
                />
              )}
            </div>
          );
        })}
      </div>