How to add onClick button to any tabs in MUI? - reactjs

Question

I wanna add onClick in button (like swap languages in google translate) to any tabs. I want like click Swap languages in google translate to other languages like en -> es to es -> en.
const [value_s, setValue_s] = useState('one');
const [value_t, setValue_t] = useState('four');
const handleChange_s = (event, newValue) => {
setValue_s(newValue);
};
const handleChange_t = (event, newValue) => {
setValue_t(newValue);
};
<Tabs
value={value_s}
onChange={handleChange_s}
>
{languages.map((item) => (
<Tab key={item} label={item.Name} onClick={() => { setSource(item.langcode) }} />
))}
</Tabs>
{/* Swap languages Button*/}
<Tooltip title="Swap languages">
<IconButton
onClick={() => { setSource(target), setTarget(source) }}
>
<SwapHorizIcon />
</IconButton>
</Tooltip>
<Tabs
value={value_t}
onChange={handleChange_t}
textColor="secondary"
indicatorColor="secondary"
>
{languages.map((item) => (
<Tab key={item} label={item.Name} onClick={() => { setTarget(item.langcode) }} />
))}
</Tabs>

Answer 1

You can add a value prop to the Tab component. Which will allow you to toggle on the value, instead the index.
For this we need to change the initial states of the source and target.
const [value_s, setValue_s] = useState("en");
const [value_t, setValue_t] = useState("es");
Now to can add the value prop to the Tab component, same by the target Tab
<Tabs value={value_s} onChange={handleChange_s}>
{languages.map((item) => (
<Tab
key={item}
value={item.langcode} // the value
label={item.Name}
onClick={() => {
setSource(item.langcode);
}}
/>
))}
</Tabs>
Create a handleSwap function for the button
const handleSwap = () => {
setValue_s(value_t);
setValue_t(value_s);
};
Which we can use like this
<IconButton onClick={handleSwap}>