import React, { useState } from
'react'
;
import { MDBTabs, MDBTabsItem, MDBTabsLink,
MDBTabsContent, MDBTabsPane } from
'mdb-react-ui-kit'
;
export
default
function
App() {
const [basicActive, gfg1] = useState(
'2'
);
const click = (value) => {
if
(value === basicActive) {
return
;
}
gfg1(value);
};
return
(
<div id=
'gfg'
>
<h2>GeeksforGeeks</h2>
<h4>ReactJS MDBootstrap pills Component</h4>
<MDBTabs pills className=
'mb-3'
>
<MDBTabsItem>
<MDBTabsLink onClick={() => click(
'1'
)}
active={basicActive ===
'1'
}>
Python
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => click(
'2'
)}
active={basicActive ===
'2'
}>
C++
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => click(
'3'
)}
active={basicActive ===
'3'
}>
JavaScript
</MDBTabsLink>
</MDBTabsItem>
</MDBTabs>
<MDBTabsContent>
<MDBTabsPane show={basicActive ===
'1'
}>
Python is a high-level, general-purpose
and a very popular programming language
</MDBTabsPane>
<MDBTabsPane show={basicActive ===
'2'
}>
C++ is a general-purpose programming
language that was developed <br />
as an enhancement of the C language
to include object-oriented paradigm
</MDBTabsPane>
<MDBTabsPane show={basicActive ===
'3'
}>
JavaScript is the world most popular
lightweight, interpreted compiled <br />
programming language. It is also known
as scripting language
for
web pages
</MDBTabsPane>
</MDBTabsContent>
</div>
);
}