React TypeScript 无法对表进行排序，因为“类型‘元素’不可分配给类型‘字符串’.ts(2345)”

Question

I have problem with sorting a table in react component. The issue is related to typescript and it highlights argument and displays an error that is: 'Argument of type '(name1: string, name2: string) => number' is not assignable to parameter of type '(a: Element, b: Element) => number'. Types of parameters 'name1' and 'a' are incompatible. Type 'Element' is not assignable to type 'string'.

My parent component:

const SearchWithDropdown: React.FC = () => {
  const [countries, setCountries] = useState<Array<Country>>([])
  const [value, setValue] = useState('')
  const [filteredCountries, setFilteredCountries] = useState<Array<Country>>([])
  const [isVisible, setIsVisible] = useState(false)

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = event.target
    setValue(value)
    changeResultVisibility(value)
  }

  const changeResultVisibility = (value: string) => {
    setIsVisible(value.length >= 3)
  }

  useEffect(() => {
    const fetchMyAPI = async () => {
      let response = await fetch(url)
      const json = await response.json()
      setCountries(json)
    }
    fetchMyAPI()
  }, [])


  useEffect(() => {
    if (value.length >= 3 && countries.length > 0) {
      setFilteredCountries(
        countries
          .filter((el: Country) => el.name.toLowerCase().includes(value))
      )
    }
  }, [value, countries])

  console.log(filteredCountries)

  return (
    <div>
      <input type="text" placeholder="Search..." value={value} onChange={handleChange}></input>
      {isVisible ? (
        filteredCountries.length > 0 ? (
          <DropdownList filteredCountries={filteredCountries} value={value} />
        ) : (
          <div>Not found!</div>
        )
      ) : null}
    </div>
  )
}

And child component:

interface DropdownListProps {
  filteredCountries: Country[]
  value: string
}

function sortData (name1: string, name2: string): number {
  name1 = name1.toLowerCase()
  name2 = name2.toLowerCase()
  return name1 > name2 ? 1 : name2 > name1 ? -1 : 0
}

const DropdownList: React.FC<DropdownListProps> = ({ filteredCountries, value }) => {
  const renderData = () =>
    filteredCountries
    .map((el) => (
      <DropdownItem key={el.name}>
        {reactStringReplace(el.name, value, (match: string, i: number) => (
          <strong key={i}>{match}</strong>
        ))}
      </DropdownItem>
    ))
    .sort(sortData)

  return <div>{renderData()}</div>
}

And my d.ts file:

export interface Country {
  name: string
}

I have tried to solve in by changing declaration in d.ts file, but it sounds a little bit stupid. I am newbie in TS, so maybe my assumption of sorting in this place is wrong. Maybe it should be after filter method in parent component... hmm..

Many thanks for a help!

Answer 1

It seems that your sort function receives Element , cause you modify your countries array with map method and return array of DropdownItem s. So I would suggest to do sorting before passing the data to DropdownItem components.
Also item of filteredCountries is an object with property name ({name: string}), so your sorting function will receive the object and should extract name property from it

function sortData (c1: Country, c2: Country): number {