React js Dynamic Tabs add or delete functionality

<!DOCTYPE html>
<html>

<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 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)}
                  >
                    &times; 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>

xxxxxxxxxx
 
<!DOCTYPE html>
<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)}
                  >
                    &times; 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>