Return to Answer

You can refactor that component into a main component, and each list will have its own component. Then you can reuse the list component multiple times:

export default function SearchBarSplit() {
 /** Active list is used to determine whether the search list should be popup or not */
 const [activeList, setActiveList] = useState<ActiveList>(null); 
 return (
<>
 <SearchDiv listName="1" list={list1} activeList={activeList} setActiveList={setActiveList} />
 <SearchDiv listName="2" list={list2} activeList={activeList} setActiveList={setActiveList} />
 Active list: <strong>{activeList}</strong>
</>
 );
}
function SearchDiv({listName, list, activeList, setActiveList}: {listName: '1' | '2', list: List, activeList: ActiveList, setActiveList: StateUpdater<ActiveList>}){
 const [searchList, setSearchList] = useState<null | SearchList>(null);
 const [cursor, setCursor] = useState<Cursor>(0); 
 const [selectedItem, setSelectedItem] = useState<null | SelectedItem>(null); 
...

Full code.

You can refactor that component into a main component, and each list will have its own component. Then you can reuse the list component multiple times:

export default function SearchBarSplit() {
 /** Active list is used to determine whether the search list should be popup or not */
 const [activeList, setActiveList] = useState<ActiveList>(null); 
 return (
<>
 <SearchDiv listName="1" list={list1} activeList={activeList} setActiveList={setActiveList} />
 <SearchDiv listName="2" list={list2} activeList={activeList} setActiveList={setActiveList} />
 Active list: <strong>{activeList}</strong>
</>
 );
}
function SearchDiv({listName, list, activeList, setActiveList}: {listName: '1' | '2', list: List, activeList: ActiveList, setActiveList: StateUpdater<ActiveList>}){
 const [searchList, setSearchList] = useState<null | SearchList>(null);
 const [cursor, setCursor] = useState<Cursor>(0); 
 const [selectedItem, setSelectedItem] = useState<null | SelectedItem>(null); 
...

Full code.

Head over to Managing State – React to learn more many ways to manage states.

Here is my current version. I simply split each div to another component and reuse it multiple times.

export default function SearchBarSplit() {
 /** Active list is used to determine whether the search list should be popup or not */
 const [activeList, setActiveList] = useState<ActiveList>(null); 
 return (
<>
 <SearchDiv listName="1" list={list1} activeList={activeList} setActiveList={setActiveList} />
 <SearchDiv listName="2" list={list2} activeList={activeList} setActiveList={setActiveList} />
 Active list: <strong>{activeList}</strong>
</>
 );
}
function SearchDiv({listName, list, activeList, setActiveList}: {listName: '1' | '2', list: List, activeList: ActiveList, setActiveList: StateUpdater<ActiveList>}){
 const [searchList, setSearchList] = useState<null | SearchList>(null);
 const [cursor, setCursor] = useState<Cursor>(0); 
 const [selectedItem, setSelectedItem] = useState<null | SelectedItem>(null); 
...

Full code.

You can refactor that component into a main component, and each list will have its own component. Then you can reuse the list component multiple times:

export default function SearchBarSplit() {
 /** Active list is used to determine whether the search list should be popup or not */
 const [activeList, setActiveList] = useState<ActiveList>(null); 
 return (
<>
 <SearchDiv listName="1" list={list1} activeList={activeList} setActiveList={setActiveList} />
 <SearchDiv listName="2" list={list2} activeList={activeList} setActiveList={setActiveList} />
 Active list: <strong>{activeList}</strong>
</>
 );
}
function SearchDiv({listName, list, activeList, setActiveList}: {listName: '1' | '2', list: List, activeList: ActiveList, setActiveList: StateUpdater<ActiveList>}){
 const [searchList, setSearchList] = useState<null | SearchList>(null);
 const [cursor, setCursor] = useState<Cursor>(0); 
 const [selectedItem, setSelectedItem] = useState<null | SelectedItem>(null); 
...

Full code.