Refactor AsyncSearch component for better key management
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { useState, useEffect, useCallback } from 'react'
|
import React, { useState, useEffect, useCallback } from 'react'
|
||||||
import { Loader2 } from 'lucide-react'
|
import { Loader2 } from 'lucide-react'
|
||||||
import { useDebounce } from '@/hooks/useDebounce'
|
import { useDebounce } from '@/hooks/useDebounce'
|
||||||
|
|
||||||
@@ -204,7 +204,7 @@ export function AsyncSearch<T>({
|
|||||||
))}
|
))}
|
||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
{options.map((option, idx) => (
|
{options.map((option, idx) => (
|
||||||
<>
|
<React.Fragment key={getOptionValue(option) + `-fragment-${idx}`}>
|
||||||
<CommandItem
|
<CommandItem
|
||||||
key={getOptionValue(option) + `${idx}`}
|
key={getOptionValue(option) + `${idx}`}
|
||||||
value={getOptionValue(option)}
|
value={getOptionValue(option)}
|
||||||
@@ -215,9 +215,9 @@ export function AsyncSearch<T>({
|
|||||||
{renderOption(option)}
|
{renderOption(option)}
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
{idx !== options.length - 1 && (
|
{idx !== options.length - 1 && (
|
||||||
<div key={idx} className="bg-foreground/10 h-[1px]" />
|
<div key={`divider-${idx}`} className="bg-foreground/10 h-[1px]" />
|
||||||
)}
|
)}
|
||||||
</>
|
</React.Fragment>
|
||||||
))}
|
))}
|
||||||
</CommandGroup>
|
</CommandGroup>
|
||||||
</CommandList>
|
</CommandList>
|
||||||
|
Reference in New Issue
Block a user