title: Table rendering question according to React Select Box
body: <p>There is a select box as shown in the picture, if you select the default value of the 'option1 option3' menu, there is a default table, if you select 'option1', the 'option1' table is created, and if you select 'option2', I want to create a select box. When you press option 1, the 'option1' table is created together on the main menu table. How can I make it?</p>
  <p><a href="https://i.stack.imgur.com/zNUx7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zNUx7.jpg" alt="enter image description here" /></a></p>
  <pre><code>const TableCard = styled(Card)`
    padding: 0;
    border-radius: 6px;
  
    table {
      border-radius: 6px;
  
      tr {
        border-radius: 6px;
      }
    }
  `;
  
  const SelectedTableCard = styled(TableCard)`
    tbody tr {
      border-bottom: none;
      background-color: #fff;
    }
  `;
  
  export default function ManageLog() {
      const [userInfo] = useUserInfo();
  
      const [selected, setSelected] = useState({
          name: &quot;option 1 option3&quot;,
          userLog: 0,
      })
  
      const [loginLog, setLoginLog] = useState({
          name: &quot;option1&quot;,
          userLog: 1
      })
  
      useEffect(() =&gt; {
          setSelected({
              name: &quot;option 1 option3&quot;,
              userLog: (userInfo?.type === &quot;aggregator_member&quot; || userInfo?.type === &quot;aggregator&quot;) ? 0 : undefined
          });
      }, [userInfo]);
  
      useEffect(() =&gt; {
          setLoginLog({
              name: &quot;option1&quot;,
              userLog: (userInfo?.type === &quot;aggregator_member&quot; || userInfo?.type === &quot;aggregator&quot;) ? 1 : undefined
          })
      })
  
      const [correctList] = useMembers({
          contractCond: &quot;all&quot;,
          page: 0,
          size: 2000,
          period: &quot;all&quot;,
          searchKey: &quot;all&quot;
      });
  
      const [performanceData, isLoading, size, page, totalCount] = usePerformanceByMember(selected.userLog);
  
      const onUserInfo = (option) =&gt; {
          setSelected(option);
      };
  
      const col: ICol[] = [
          {
              title: &quot;NO&quot;,
              dataIndex: 'no',
              width: &quot;80px&quot;
          },{
              title: &quot;table1&quot;,
              dataIndex: 'userId'
          },{
              title: &quot;table2&quot;,
              dataIndex: 'memberType'
          },{
              title: &quot;table3&quot;,
              dataIndex: 'companyName'
          },{
              title: &quot;table4&quot;,
              dataIndex: 'changeForm',
              width: &quot;148px&quot;
          },{
              title: &quot;table5&quot;,
              dataIndex: 'changeTime'
          }
      ]
  
      const userLoginCol: ICol[] = [
          {
              title: &quot;table6&quot;,
              dataIndex: 'seq',
              width: &quot;80px&quot;
          },{
              title: &quot;table7&quot;,
              dataIndex: &quot;userId&quot;
          },{
              title: &quot;table8&quot;,
              dataIndex: &quot;companyName&quot;
          },{
              title: &quot;table9&quot;,
              dataIndex: &quot;ipAddress&quot;
          },{
              title: &quot;table1-&quot;,
              dataIndex: &quot;connectType&quot;
          },{
              title: &quot;table11&quot;,
              dataIndex: &quot;connectTime&quot; 
          }
      ]
  
      const correctLogDefaultValue = useMemo(() =&gt; {
          return selected;
        }, [selected]);
  
      const memberTypeDefaultValue = useMemo (() =&gt; {
          return loginLog;
      }, [loginLog])
  
      const [searchValue, setSearchValue] = useState(&quot;&quot;);
      const [filterDate, setFilterDate] = useState([new Date(), new Date()]);
      const [searchOptions, setSearchOptions] = useState(null);
      const [correctLog, setCorrectLog] = useState ({ label: &quot;option1 option3&quot; ,value: &quot;all&quot;});
  
      const handleSearchData = () =&gt; {
          console.log(correctLog, memberType, filterDate, searchValue)
          setSearchOptions({
              correctLog: correctLog.value,
              memberType: memberType.value,
          })
      }
  
      return (
          &lt;div&gt;
              &lt;Row justifyContent=&quot;flex-start&quot;&gt;
                  {(userInfo?.type === &quot;aggregator_member&quot; || userInfo?.type === &quot;aggregator&quot;) &amp;&amp;
                  &lt;Col width={180} mr={10}&gt;
                      &lt;Select
                          onSelect={onUserInfo}
                          options={[
                              { label: &quot;option1 option3&quot;, userLog: 0},
                              ...correctList.map(correct =&gt; ({
                                  userLog: correct.userSeq,
                                  name: correct.correctInfo
                              })),
                              { label: &quot;option1&quot;, userLog: 1},
                              { label: &quot;option2&quot;, value: &quot;error_log&quot;}
                          ]}
                              defaultValue={correctLogDefaultValue}
                              selectKey=&quot;userLog&quot;
                              labelKey=&quot;label&quot;
                      /&gt;
                  &lt;/Col&gt;}
                  {!isLoading &amp;&amp; &lt;&gt;
                  {selected.userLog !== 0 ?
                  &lt;&gt;
                      {performanceData.main.length &gt; 0}
                          &lt;Row&gt;
                              &lt;Col width={&quot;100%&quot;}&gt;
                              &lt;SelectedTableCard&gt;
                              &lt;Table 
                                data={[
                                  {
                                      seq : 1,
                                      userId : &quot;admin001&quot;,
                                      companyName : &quot;company&quot;,
                                      ipAddress : &quot;111&quot;,
                                      connectType : &quot;ss&quot;,
                                      connectTime : &quot;2021.04.21 17:30:00&quot;
                                  },{
                                      seq : 2,
                                      userId : &quot;admin002&quot;,
                                      companyName : &quot;company&quot;,
                                      ipAddress : &quot;123&quot;,
                                      connectType : &quot;aa&quot;,
                                      connectTime : &quot;2021.04.25 17:30:00&quot;
                                  }
                              ]}
                              col={userLoginCol} 
                              keyItem=&quot;seq&quot; pagination={false} /&gt;
                              &lt;/SelectedTableCard&gt;
                              &lt;/Col&gt;
                          &lt;/Row&gt;
                      &lt;/&gt;
                      : &lt;Row&gt;
                          &lt;/Row&gt;}
                  &lt;/&gt;}                
                  &lt;Col width={105} mr={10}&gt;
                      &lt;Select
                          onSelect={value =&gt; setMemberType(value)}
                          options={[
                              { label: &quot;anotherSelectBox&quot;, value: &quot;contract_member&quot;},
                              { label: &quot;anotherMenu1&quot;, value: &quot;manager&quot;}
                          ]}
                          defaultValue={memberTypeDefaultValue}
                          selectKey=&quot;value&quot;
                          labelKey='label'
                      /&gt;
                  &lt;/Col&gt;
                  &lt;Col width={333} mr={10}&gt;
                      &lt;DatePicker onChangeDate={date =&gt; setFilterDate(date as [Date, Date])} 
                      disabled={false}
                      isRange={true}
                      format={&quot;yyyy.MM.dd HH:mm:ss&quot;} /&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
              &lt;Row&gt;
                  &lt;Col width={'100%'}&gt;
                      &lt;Card padding={false}&gt;
                      &lt;Table data={[
                          {
                              no : 1,
                              userId : &quot;admin001&quot;,
                              memberType : &quot;1&quot;,
                              companyName : &quot;company&quot;,
                              changeForm : &quot;12&quot;,
                              changeTime : &quot;2021.11.06 17:30:00&quot;
                          },{
                              no : 2,
                              userId : &quot;admin002&quot;,
                              memberType : &quot;2&quot;,
                              companyName : &quot;company&quot;,
                              changeForm : &quot;21&quot;,
                              changeTime : &quot;2021.01.06 17:30:00&quot;
                          },{
                              no : 3,
                              userId : &quot;admin003&quot;,
                              memberType : &quot;3&quot;,
                              companyName : &quot;company&quot;,
                              changeForm : &quot;23&quot;,
                              changeTime : &quot;2021.01.31 17:30:00&quot;
                          },{
                              no : 4,
                              userId : &quot;admin004&quot;,
                              memberType : &quot;4&quot;,
                              companyName : &quot;company&quot;,
                              changeForm : &quot;21&quot;,
                              changeTime : &quot;2021.02.06 17:30:00&quot;
                          }
                      ]       
                      } col={col} keyItem=&quot;no&quot;
                          current={page.page + 1} 
                          onPageChange={(_page, _size) =&gt; {
                              page.setPage(_page - 1);
                              size.setSize(_size);
                      }}
                      totalCount={totalCount}
                      /&gt;
                      &lt;/Card&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
          &lt;/div&gt;
      )
  }
  
  </code></pre>