title: How to create dynamic elements inside global tabs
body: <p>I am working with react  hooks, And encounter a problem where I have been stuck now.</p>
  <p>I have one json data which I am getting whenever user <code>logs in</code> so by that I am creating one top bar which shows <code>user names</code> and when user click on those names I am showing some data which they have created or present for them in db, That data I am already getting in data</p>
  <p><strong>MY data I am getting from server</strong></p>
  <pre><code> let data=   [
    {
      &quot;id&quot;: 1,
      &quot;name&quot;: &quot;Maxi&quot;,
      &quot;myData&quot;: [
        {
          &quot;data_name&quot;: &quot;div1&quot;,
          &quot;data_title&quot;: &quot;div1 tittle&quot;
        },
        {
          &quot;data_name&quot;: &quot;div1&quot;,
          &quot;data_title&quot;: &quot;div tittle&quot;
        }
      ]
    },
    {
      &quot;id&quot;: 2,
      &quot;name&quot;: &quot;Phill&quot;,
      &quot;myData&quot;: [
        {
          &quot;data_name&quot;: &quot;div21&quot;,
          &quot;data_title&quot;: &quot;div21 tittle&quot;
        }
      ]
    }
  ]
  </code></pre>
  <p>I have one button on side on which I want to create new div, inside the name I have selected from top.</p>
  <p>SO suppose I have listed the <code>topbar</code> and there are total of 3 data i.e 3 names, so if data length is smaller than 4 what I am doing, showing a plus button to create one more tab, so user can create one more tab and then they can create one div inside there each tab,</p>
  <p><strong>What I have done</strong></p>
  <p>I am populating the top bar as well as when I click on side button I am creating one <code>div</code> inside that selected tab.</p>
  <p><strong>Issues I am facing</strong></p>
  <ul>
  <li>if length of data is less then four I am providing a plus button to create on more tab (give it default name), but I am not getting any idea how can I create the new one.</li>
  <li>when I click on side button to create one dive inside tab, and I go to other tab and come back again I want that created <code>div</code> should not gets deleted.</li>
  <li>Suppose I have 3 tabs (data) so when page loads the first tab data I want to show, but it is not showing up I need to click there only it is showing up.</li>
  <li>if the data is null then I can create up to 4 tabs this also I a=want some Idea to do it.</li>
  </ul>
  <p><strong>I am linking my code sand box here so it will be easy to understand what I have done and what I am trying to do</strong></p>
  <p><a href="https://codesandbox.io/s/youthful-flower-61lxt?file=/src/App.js" rel="nofollow noreferrer">Code sandbox</a></p>
  <p>Here in code sand box I have written all my code please check it out.</p>
  <p>I have explained every thing what I a m trying to do, I know how to code but not getting any idea or approach.</p>
  <p>if there is no data for user then I will start creating tabs and nested elements from 1 for that user.</p>
  <p>in each there will be a save button for each new element created, so I will do that, my only consern is to not to loss data on ui when I go one tab to other once I created them</p>
  <pre><code>export default function App() {
    const [active_menu, setactive_menu] = useState(0);
    const [nestedData, setnestedData] = useState(null);
  
    let data1 = [
      {
        id: 1,
        name: &quot;Maxi&quot;,
        myData: [
          {
            data_name: &quot;div1&quot;,
            data_title: &quot;div1 tittle&quot;
          },
          {
            data_name: &quot;div1&quot;,
            data_title: &quot;div tittle&quot;
          }
        ]
      },
      {
        id: 2,
        name: &quot;Phill&quot;,
        myData: [
          {
            data_name: &quot;div21&quot;,
            data_title: &quot;div21 tittle&quot;
          }
        ]
      }
    ];
    const Tab_click = (index, li) =&gt; {
      setactive_menu(index);
      setnestedData(li);
    };
  
    const Create_element = () =&gt; {
      //here I don't know how to create new elements
    };
    const addnewTab=()=&gt;{
      
    }
    return (
      &lt;div className=&quot;App row&quot;&gt;
        {data1.map((li, index) =&gt; (
          &lt;div className=&quot;col-4 col-sm-4 col-md-3 col-lg-3 col-xl-3&quot; key={index}&gt;
            &lt;div
              className={
                index === active_menu
                  ? &quot;row dashboard_single_cont_active&quot;
                  : &quot;row dashboard_single_cont&quot;
              }
              onClick={() =&gt; Tab_click(index, li)}
            &gt;
              &lt;div className=&quot;dashboard_name col-10 col-sm-10 col-md-9 col-lg-10 col-xl-10&quot;&gt;
                {li.name}
              &lt;/div&gt;
              &lt;div
                className={
                  active_menu === index
                    ? &quot;dashboard_option_active col-2 col-sm-2 col-md-3 col-lg-2 col-xl-2&quot;
                    : &quot;dashboard_option col-2 col-sm-2 col-md-3 col-lg-2 col-xl-2&quot;
                }
                align=&quot;center&quot;
              &gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        ))}
        {data1.length &lt; 4 &amp;&amp; (
         &lt;span
         onClick={addnewTab}
         &gt;ADD&lt;/span&gt;
        )}
        &lt;div className=&quot;col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11&quot;&gt;
          &lt;div className=&quot;row&quot;&gt;
            {nestedData !== null &amp;&amp;
              nestedData.myData.map((li, index) =&gt; (
                &lt;div className=&quot;col-11 col-sm-11 col-md-8 col-lg-6 col-xl-6&quot;&gt;
                  &lt;NEsted data={li} /&gt;
                  &lt;br&gt;&lt;/br&gt;
                &lt;/div&gt;
              ))}
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;RightBar Create_element={Create_element} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>