In this project, React, TypeScript and ant design are used. In this part, I have used the tabs available in ant design. There are two panels in each tab. Each panel has a button. For example, in tab1, when the Edit button is clicked in the MyPanel1 component, it should open the second panel, MyPanelEdit1. And then (in the same tab1) MyPanelEdit1 component, when the save button is clicked, it should display the previous panel, that is, MyPanel1. In the parent component, I've made a state, and with a condition, I've orchestrated the switching of two panels per tab. But the problem is that when the panel changes in tab1, tab2 also changes without my request. If a change is made in tab1 panel, no change should occur in tab2 panel. In general, by changing the state in tab1, it will affect tab2 and vice versa. I would be grateful if you could guide me.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React, { useState } from "react";
import { Tabs } from "antd";
// *****parent component
const MyTabs = () => {
const [edit , setEdit]= useState(false);
const handlePanel = () => {
setEdit(!edit);
}
return (
<div>
<Tabs>
<TabPane key={1} tab="tab 1">
{
edit ? <MyPanelEdit1 onClick={handlePanel} /> : <MyPanel1 onClick={handlePanel} />
}
</TabPane>
<TabPane key={2} tab="tab 2">
{
edit ? <MyPanelEdit2 onClick={handlePanel} /> : <MyPanel2 onClick={handlePanel} />
}
</TabPane>
</Tabs>
</div>
);
};
//child component: MyPanel1
type Propstype = {
onClick: React.MouseEventHandler<HTMLElement>;
};
const MyPanel1 = ({onClick} : Propstype) => {
<div>
<div>This is MyPanel1</div>
<button onClick={onClick}>Edit</button>
</div>
}
//child component: MyPanelEdit1
type Propstype = {
onClick: React.MouseEventHandler<HTMLElement>;
};
const MyPanelEdit1 = ({onClick} : Propstype) => {
<div>
<div>This is MyPanelEdit1</div>
<button onClick={onClick}>Save Edit</button>
</div>
}
//child component: MyPanel2
type Propstype = {
onClick: React.MouseEventHandler<HTMLElement>;
};
const MyPanel2 = ({onClick} : Propstype) => {
<div>
<div>This is MyPanel2</div>
<button onClick={onClick}>Edit</button>
</div>
}
//child component: MyPanelEdit2
type Propstype = {
onClick: React.MouseEventHandler<HTMLElement>;
};
const MyPanelEdit2 = ({onClick} : Propstype) => {
<div>
<div>This is MyPanelEdit2</div>
<button onClick={onClick}>Save Edit</button>
</div>
}