xxxxxxxxxx
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const { useState } = React;
function App() {
const [tabs, setTabs] = useState([
{
heading: "Font Awesome Icons",
content: "This is fontawesomeicons.com",
},
{
heading: "Tutorials Plane",
content: "This is tutorialsplane.com",
},
]);
const [activeTabIndex, setActiveTabIndex] = useState(0);
const setActiveTab = (index) => {
setActiveTabIndex(index);
};
const addTab = () => {
const newTab = {
heading: `Tab ${tabs.length + 1}`,
content: "", // Add initial content here
};
setTabs([...tabs, newTab]);
setActiveTabIndex(tabs.length); // Use the functional form to ensure the updated value is correct
};
const removeTab = (index) => {
const updatedTabs = tabs.filter((tab, i) => i !== index);
setTabs(updatedTabs);
setActiveTabIndex(updatedTabs.length ? 0 : null); // Use null instead of 0 when no tabs are left
};
const tabTitle = (index) => {
return `Tab ${index + 1}`;
};
return (
<div className='container'>
<h3>React Dynamic Tab add or delete method</h3>
<div className="tabs">
<ul className="tab-header">
{tabs.map((tab, index) => (
<li
key={index} // Use a unique key for each list item
className={activeTabIndex === index ? "active-tab" : ""}
onClick={() => setActiveTab(index)}
>
{tabTitle(index)}
</li>
))}
<span className="add-remove-icons">
<span className="add-tab-icon" onClick={addTab}>
+ Add
</span>
{activeTabIndex !== null && (
<span
className="remove-tab-icon"
onClick={() => removeTab(activeTabIndex)}
>
× Remove
</span>
)}
</span>
</ul>
<div className="tab-body">
{tabs.map((tab, index) => (
<div className="tab" key={index} style={{ display: activeTabIndex === index ? 'block' : 'none' }}>
<input
value={tab.heading}
onChange={(e) => {
const newTabs = [...tabs];
newTabs[index].heading = e.target.value;
setTabs(newTabs);
}}
/>
<textarea
value={tab.content}
onChange={(e) => {
const newTabs = [...tabs];
newTabs[index].content = e.target.value;
setTabs(newTabs);
}}
></textarea>
</div>
))}
</div>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h3 {
margin-bottom: 20px;
text-align: center;
color: #333;
}
/* Improved styling for the tabs container */
.tabs {
border: 1px solid #ddd;
border-radius: 5px;
overflow-x: auto;
/* Enable horizontal scrolling for overflowing tabs */
}
/* Styling for the tab header */
.tab-header {
list-style: none;
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ddd;
overflow-x: auto;
/* Enable horizontal scrolling for overflowing tabs */
white-space: nowrap;
/* Prevent tabs from wrapping to the next line */
}
/* Styling for each tab */
.tab-header li {
cursor: pointer;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
margin-right: 5px;
/* Add some space between tabs */
min-width: 120px;
/* Set a minimum width for each tab */
text-overflow: ellipsis;
/* Show ellipsis (...) for long tab names */
overflow: hidden;
/* Hide overflowing tab names */
white-space: nowrap;
text-align: center;
}
/* Hover styles for tabs */
.tab-header li:hover {
background-color: #f2f2f2;
color: #000;
}
/* Active tab styles */
.tab-header .active-tab {
background-color: #007bff;
color: #fff;
}
/* Styling for add and remove icons */
.add-remove-icons {
display: flex;
align-items: center;
}
.add-tab-icon,
.remove-tab-icon {
cursor: pointer;
padding: 8px 15px;
border-radius: 5px;
margin-right: 5px;
transition: background-color 0.3s ease;
color: #fff;
/* Added color for the icons */
}
.add-tab-icon {
background-color: #28a745;
/* Green color for Add button */
}
.add-tab-icon:hover,
.remove-tab-icon:hover {
background-color: #f2f2f2;
color: #000;
/* Added color for hover effect */
}
.remove-tab-icon {
background-color: #dc3545;
/* Red color for Remove button */
}
.tab-body {
padding: 20px;
}
.tab input,
.tab textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
.tab textarea {
resize: vertical;
}
</style>
</body>
</html>