search in react

2022.10.22
search in react
#react
use client /components/post/reExport 
import syncWait from  

export const getJsxWithBoldSubstr = (text, subString) => {
  const regExp = new RegExp( )
  return text.split(regExp).map((str, index) => regExp.test(str) ? <b key={ }>{str}</b> : str)
}

const countriesAll = [ Antigua Barbuda Azerbaijan Bangladesh Bosnia Herzegovina British Virgin Islands Burkina Faso Cape Verde Cayman Islands Cook Islands Costa Rica Cote D Ivoire Cruise Ship Czech Republic Dominican Republic El Salvador Equatorial Guinea Falkland Islands Faroe Islands French Polynesia French West Indies Guinea Bissau Isle of Man Kazakhstan Kyrgyz Republic Liechtenstein Luxembourg Madagascar Mauritania Montenegro Montserrat Mozambique Netherlands Netherlands Antilles New Caledonia New Zealand Papua New Guinea Philippines Puerto Rico Saint Pierre Miquelon San Marino Saudi Arabia Seychelles Sierra Leone South Africa South Korea St Kitts Nevis St Vincent Switzerland Tajikistan Trinidad Tobago Turkmenistan Turks Caicos United Arab Emirates United Kingdom Uzbekistan Virgin Islands (US) ]

function Component() {
  const [inputValue, setInputValue] = useState( )
  const deferredInputValue = useDeferredValue(inputValue)
  const [countries, setCountries] = useState(countriesAll)

  useEffect(() => {
    console.log(deferredInputValue)
    const foundCountries = countriesAll.filter(country => country.toLowerCase().includes(inputValue.toLocaleLowerCase().trim()))
    syncWait(500)
    setCountries(foundCountries)
  }, [deferredInputValue])

  return (
    <>
      <div><input type=  placeholder=  value={inputValue} onChange={(e) => setInputValue(e.target.value)} /></div>
      <h1>Countries</h1>
      <ul>
        {
          countries.map(country => (
            <li key={country}>
              {
                inputValue
                  ? <span>{getJsxWithBoldSubstr(country, inputValue)}</span>
                  : country
              }
            </li>
          ))
        }
      </ul>
    </>
  )
}

const postObj = {
  title:  ,
  date:  ,
  tags: [ ],
  imgUrl:  ,
  desc:  ,
  body: (
    <>
      <H>Search in react</H>

      <Code block jsx>{ /components/post/reExport 
      import syncWait from  

      export const getJsxWithBoldSubstr = (text, subString) => {
        const regExp = new RegExp(\ )
        return text.split(regExp).map((str, index) => regExp.test(str) ? <b key={\ }>{str}</b> : str)
      }

      const countriesAll = [ Antigua Barbuda Azerbaijan Bangladesh Bosnia Herzegovina British Virgin Islands Burkina Faso Cape Verde Cayman Islands Cook Islands Costa Rica Cote D Ivoire Cruise Ship Czech Republic Dominican Republic El Salvador Equatorial Guinea Falkland Islands Faroe Islands French Polynesia French West Indies Guinea Bissau Isle of Man Kazakhstan Kyrgyz Republic Liechtenstein Luxembourg Madagascar Mauritania Montenegro Montserrat Mozambique Netherlands Netherlands Antilles New Caledonia New Zealand Papua New Guinea Philippines Puerto Rico Saint Pierre Miquelon San Marino Saudi Arabia Seychelles Sierra Leone South Africa South Korea St Kitts Nevis St Vincent Switzerland Tajikistan Trinidad Tobago Turkmenistan Turks Caicos United Arab Emirates United Kingdom Uzbekistan Virgin Islands (US) ]

      function Component() {
        const [inputValue, setInputValue] = useState( )
        const deferredInputValue = useDeferredValue(inputValue)
        const [countries, setCountries] = useState(countriesAll)

        useEffect(() => {
          console.log(deferredInputValue)
          const foundCountries = countriesAll.filter(country => country.toLowerCase().includes(inputValue.toLocaleLowerCase().trim()))
          syncWait(500)
          setCountries(foundCountries)
        }, [deferredInputValue])

        return (
          <>
            <div><input type=  placeholder=  value={inputValue} onChange={(e) => setInputValue(e.target.value)} /></div>
            <h1>Countries</h1>
            <ul>
              {
                countries.map(country => (
                  <li key={country}>
                    {
                      inputValue
                        ? <span>{getJsxWithBoldSubstr(country, inputValue)}</span>
                        : country
                    }
                  </li>
                ))
              }
            </ul>
          </>
        )
      }
      