title: conditionally render a component inside tabs in react
body: <p>I am developing admin panel for hotel backend</p>
  <p>here I want to check the verified status and render accordingly</p>
  <p>here is what I did</p>
  <pre><code>    const AdminDashboard = () =&gt; {
          return (
              &lt;&gt;
                  &lt;DashboardWrapper&gt;
                      &lt;h1 className=&quot;title1 text-center mb-4&quot;&gt;Admin Dashboard&lt;/h1&gt;;
                      {Object.values(hotel).map((item) =&gt; {
                          if (item.verifiedStatus === &quot;verified&quot;) {
                              return &lt;AdminCard key={item._id} item={item} /&gt;;
                          }
                          &lt;Tabs defaultActiveKey=&quot;1&quot;&gt;
                              &lt;TabPane tab=&quot;Pending&quot; key=&quot;1&quot; className=&quot;tabs&quot;&gt;&lt;/TabPane&gt;
  
                              &lt;TabPane tab=&quot;Verified&quot; key=&quot;2&quot; className=&quot;tabs&quot;&gt;&lt;/TabPane&gt;
                              &lt;TabPane tab=&quot;Rejected&quot; key=&quot;3&quot; className=&quot;tabs&quot;&gt;
                                  Rejected Hotels
                              &lt;/TabPane&gt;
                          &lt;/Tabs&gt;;
                      })}
                  &lt;/DashboardWrapper&gt;
              &lt;/&gt;
          );
      };
  
  </code></pre>
  <p>it is now currently showing verified hotels but I want to move that logic to tabs</p>
  <pre><code>if (item.verifiedStatus === &quot;verified&quot;) {
                              return &lt;AdminCard key={item._id} item={item} /&gt;;
                          }
  
  </code></pre>
  <p>I want to check above condition and render in respective tabs</p>
  <p>here is output screenshot</p>
  <p><a href="https://i.stack.imgur.com/eUpHH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eUpHH.png" alt="enter image description here" /></a></p>