React js Dynamic Tabs add or delete functionality

    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>