How to get title of Tab when tab is changed using onChange in Ant design

user_16400589 0
Viewed 866

How do I get Title of the Tab when onchange triggered in Ant design , As of now I'm getting only key of changed tab. How do I get title along with key .

Here is the code:

 <Tabs
          type="editable-card"
          onChange={onChange}
          activeKey={query.get("key")?query.get("key"):activeState}
          onEdit={onEdit}
          hideRemove
          addIcon={<MyButton />}
        >
          {panes.map((pane) => (
            <TabPane
             tab={
            <Row><Col span={18}>{pane.title} </Col>
            <Col span={4}></Col>
            <Col span={2} onClick={deleteCompound}>X</Col>
            </Row>} 
            key={pane.key}>
           
            <div  onClick={(e)=>handleInfoClick(e,"production")}>
              <CompoundContent content={pane.content}/>
           
              </div>
         
                
           
            </TabPane>
          ))}
        </Tabs>

  const onChange = (activeKey) => {
   
      
        setActiveState(query.get("key")?query.get("key"):activeKey);
      };

Please someone help me on this.

Thanks

antd reactjs
1 Answers

you can not get a direct title to manage it like this

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Tabs } from 'antd';

const { TabPane } = Tabs;

const data = [{ title: 'Test 1' }, { title: 'Test' }]

function callback(key) {
  console.log(data[key].title);
}

const Demo = () => (
  <Tabs defaultActiveKey="1" onChange={callback}>
    {data.map((item, index)=>(
      <TabPane tab={item.title} key={index}>
        Content of Tab Pane 1
      </TabPane>
    ))}
  </Tabs>
);

ReactDOM.render(<Demo />, document.getElementById('container'));
user_144977780
Related