Как сделать поиск на React.js. ЧАСТЬ 1. Live Search

🏆 Поднять мотивацию и получить плюшки(сборка, исходники, чат со мной):
🔹 Patreon: / roman_timoshchuk
🔹 Buy me a coffee: www.buymeacoff...
🔹 Crypto:
👉 USDT(ERC20): 0xA4008910De17DB20c7505425316fF72d4C5Eed96
👉 USDT(BEP20): 0x4350c4E1C0bB35634C7fDE1cFB278BE0606E3822
👉 Binance Pay: 432902886
📨 Сотрудничество ► [e-mail]
📨 Business inquiries ► [e-mail]

[@SherzodNurillaev-f3y]

Ты гений, красавчик я своего сына в честь тебя назову ❤❤❤ всё коротко и четко объяснил

[@bublikbublikovich2229]

5 минут и обьяснил доходчиво, чел ты лучший

[@kyryllsemendiaiev]

Канал находка! Желаю удачи и продвижения автору данного канала!

[@evloev4821]

Никогда раньше не делал поисковики, на работе дали задачу, потрачено времени 15 минут и готово) спасибо 😉

[@lets_try_js]

Рад что кому-то это приносит пользу)

[@user-ce9yr3my4g]

Балх как джун ва хьо?

[@evloev4821]

@@user-ce9yr3my4g ву

[@smotritelyoutube]

Рили оч круто, я когда искал как сделать поиск думал щас придется смотреть урок часовой, а тут 5 минут и все работает даже у меня с 1 раза, пасиб

[@Saveli_Sh]

Спасибо огромное! Первый опыт и тааак быстро!!! Никогда еще уроки из интернета не приносили пользу так быстро! Хотела подписаться, оказывается, уже подписана! Спасибо и успехов Вам!!!!

[@lets_try_js]

рад помочь)

[@ЕкатеринаДержицкая]

хороший пример фильтрации на стороне фронтенда, когда получаем сразу все данные.

[@nk_77777]

Дай Бог тебе здоровья, бро!)
Ну просто лучший)

[@Zubairavvv]

Спасибо, очень коротки и быстро, лучший!

[@SKAZKAPAGE]

Просто отец, нереально помог

[@lets_try_js]

рад)

[@NewDimix]

Выглядит очень просто... Спасибо, буду пробовать

[@alexandrzhuykov7355]

Наткнулся на этот видос прям в нужный момент! Спасибо за быстрый и понятный туториал!!! с меня подписка.

[@zomtv5027]

Бро очень крутоооооо!!!! ТЕБЕ от души благодарю

[@РасулМалачиев-у8у]

Спасибо, хорошо объясняешь.

[@olegpavlov4329]

Гениальность в простоте. Ты гений)))

[@dimaruy2975]

Круто! Спасибо, все очень понятно и доступно

[@jamesdarrel4540]

Братишка, ты сэкономил мне много времени и головной боли! Спасибо 😊

[@lets_try_js]

рад помочь)
успехов в обучении)

[@nikogen]

лучший
очень быстро и понятно

[@lets_try_js]

благодарю)

[@ВладимирГугин-ш7щ]

Спасибо, помогло!

[@lets_try_js]

Рад помочь )

[@TRIZ-Bogatyregold]

Спасибо за видос! Автору канала удачи!

[@lets_try_js]

благодарю

[@mszulya4100]

От души спасибо!

[@МериИскандарян-ю2ы]

Извините, а CoutryItem откуда надо брать?

[@111max11]

Спасибо, быстро и понятно)

[@lets_try_js]

спасибо))

[@ggaimer4244]

Спасибо большое)😘

[@sirlion1549]

Мощно, спасибо!

[@ruslankashapov5443]

Сначала сделал, потом посмотрел как тут - примерно совпало!

[@lets_try_js]

отличный подход)

[@RikiTiki-dv8zx]

Привет, подскажи как сделать поиск только по кнопке поиска если нажимать. Чет не пойму никак((.

[@annasaenkova3121]

привет, а как можно сделать чтобы когда выбираешь позицию из списка с вариантами поиска, то эта позиция добавлялась бы в строку поиска? как span

[@iuliiaprusakova73]

Супер, спасибо за видео

[@НатальяСеменюк-ъ6п]

Спасибо, очень помогло!)

[@lets_try_js]

рад помочь)

[@АлександрЕрмолов-п2ь]

Буду благодарен, если в следующий раз выложишь рыбу на гитхаб...

[@bakti-q8x]

Очень круто объяснили большое тебе спасибо

[@НадеждаЗакервашевич]

Спасибо. Все так легко и просто оказывается))

[@Sergei546]

круто вы молодец

[@cao_dzecbi]

Подскажи, умоляю
А как вывести на экран информацию, что по указанному фильтру нет стран?

[@krypton5204]

Спасибо большое

[@whiteguards43]

а как делать, если вместо входящего массива, и перебора через map, сделал через props

[@calebdume6930]

Большое спасибо очень помогло!!❤

[@emporteme]

а что если у меня данные рендериться не через метода map()
в моем случае мне нужно создать дерево на react-d3-tree
и поисковик на него
но там все рендериться не через map()

[@ivantrofimov6966]

Лучший!

[@TraderOff-Road]

большое спасибо !

[@DV-vt5sg]

Привет! Все классно , а почему компонент CountryItem не показал? Чё там внутри )

[@lets_try_js]

та там внутри нет ничего интересного и полезного)

[@ulanbek-mn3er]

@@lets_try_js ну можешь показать пожалуйста

[@dmitruz1900]

А как это ты добавляешь дивы и атрибуты с html в файл js безиспользования шаблонной строки?

[@nursultanmamytbekov8180]

Это jsx. Почитай документацию реакта

[@META_MAZ]

а можно в место includes написать find ?

[@arturazimov5662]

Спасибо тебе большое

[@bezbezov8867]

Молодец👍🏽

[@ВладимирЛитовченко-ш3н]

Дуже дякую за відео! Все досконало! Можно показати як правильно зробити сторінку виходу? Тобто при натиску кнопки "Вихід"

[@lets_try_js]

є відосік на каналі де повноцінний додаток роблю і там є ця функція

[@ИванПрогер]

очень круто всё работает спс за видео

[@lets_try_js]

рад помочь)

[@manofsteppe179]

Подскажи пожалуйста как ты сжимаешь файлы (gzipped)? через плагин в vs code? можешь дать ссылку на лубую инфу, я ищу инфу но не могу найти в силу не хватки знания в целом, скачал tailwind теперь не знаю как сжать, посоветовали gzipped но не знаю как подключить

[@lets_try_js]

Не совсем понял вопрос

[@manofsteppe179]

0:52 где import написано рядом зеленым цветом 7.2К (gzipped: 3K) как ты их сжал? подключал плагин или где нужно прописать через npm или как вообще тоже самое сделать?

[@lets_try_js]

@@manofsteppe179 я ничего не сжимал)
это плагин, который показывает вес подключенных библиотек просто
называется Import Cost

[@manofsteppe179]

@@lets_try_js Спасибо!

[@knuckless__]

кращий , вдячний

[@lets_try_js]

дякую)

[@daniilchistyakov3087]

Привет, как бороться с тем, что в хуке, который висит на обработчике OnChange хранится предыдущее значение из input? Порой это бывает важно.

[@lets_try_js]

не совсем понял вопрос

[@daniilchistyakov3087]

@@lets_try_js ну смотри, у нас же если мы выведем значение из хука, который повешен на onChange поискового input, то у нас будет значение перед последним действием (т.е. печатаем "друзья", а в переменной будет "друзь"). Как брать самое актуальное значение (чтобы было "друзья)?

[@yurizhdanov]

@@daniilchistyakov3087 вешать Debounce с задержкой на пол сек

[@nurlanmehdiyev7428]

Спасибо!

[@ТариэлТаиров]

спасибо

[@serjmarkelov9915]

Вау, спасибо

[@lets_try_js]

Надеюсь полезно )

[@АНДРЕЙХондард]

Люблю)
всё

[@ПетроСтесенко]

дякую друже!!!100 комент=)

[@marcusaurelius7109]

Крутой канал!!!

[@lets_try_js]

благодарю)

[@elementalhero9939]

Было бы гораздо лучше если бы делался код без проблем которые я заметил. В эффекте отсутствует зависимость getCountries. И getCountries нужно обернуть в useCallback. Линтер будет ныть. Там где ты фильтруешь countries было бы отлично обернуть в useMemo и вообще разнести по компонентам это все дело. Да и index указывать в key в этом случае совсем плохо. Прими критику как если бы твое видео смотрели не новички. Было бы профессиональнее с твоей стороны :)

[@mikestr1782]

Салют, можешь сделать этот же проект, только работало через redux?

[@STELLS541]

а смотри, столкнулся с такой проблемой - делал пагинацию по твоему видосу, потом решил прикрутить туда поиск и вроде бы все работает, но заметил такой баг, что поиск корректно работает только на первой странице, когда выбираешь 2 и любую др страницу кроме первой, то поиск начинает вести себя оч странно.

[@lets_try_js]

тут может быть много причин, без кода в этом не разобраться))

[@STELLS541]

@@lets_try_js ну я уже понял, в чем там дело было
Там же мы используем метод слайс,чтоб размер получить и кол-во страниц задать, а я туда передавал наш отфильтрованный массив и все ломалось
Я просто решил во время фильтрации скрывать наш исходный массив и подменять его на новый, все работает четко,ток стили поправить осталось

[@STELLS541]

@@lets_try_js а ещё хотел спросить- а как вот пагинацию выделять, чтоб было выделено, какая сейчас страница?

[@lets_try_js]

@@STELLS541 при клике, когда мы переключаемся на ту или иную страничку пагинации, этому элементу нужно добавить класс активности
но как там у вас это реализовано, я не знаю)

[@STELLS541]

@@lets_try_js а как это как раз сделать?
Я так понимаю,что надо динамически стили задавать ?

[@ЕвгенийКарань-ю5ф]

в сочетании с debounce будет выглядеть еще солиднее

[@lets_try_js]

Для оптимизации - несомненно

[@ЭшУильямс-ж2г]

ссылку на код можно?

[@lets_try_js]

не осталось исходника(

[@Victor-il9gm]

спасибо!

[@lets_try_js]

рад помочь)

[@MegaDimka16]

А можно ссылку на весь код программы?

[@lets_try_js]

так а это приложение старое и не дописанное)

[@MegaDimka16]

​@@lets_try_js У меня просто вопрос. У меня есть таблица которую я маплю и вывожу данные , и одна из колонок должна фильтроваться данным методом. Как мне добавить оставшиеся данные в таблицу к этому способу или наоборот. Вот const tableElements =
[...props.school]
.map(p => );

[@lets_try_js]

@@MegaDimka16 ну сложно ответить, не видя весь код полностью )

[@Влэйпи]

Не поверишь, на моем проекте тоже список стран и мне тоже надо искать страны по списку🤣

[@lets_try_js]

Удача ))

[@emporteme]

у кого есть код?)

[@b.g.5106]

толькоко не реакт)) все было хорошо на ангуляре, пока эта попса не получилась))
P.S. Извиняюсь, перепутал блогера)) но реакт овно 😀 полетят в меня камни, ведь у него большая поддержка

[@lets_try_js]

каждый имеет право на свое мнение, и в этом нет ничего плохого ))

[@b.g.5106]

@@lets_try_js 🙃

[@ПрограммистБизнесменУченый]

А как же задержка от апи???

[@ВераСудницына-к8г]

Спасибо! Очень помогло!

[@venplay1]

Отличное видео, спасибо!

[@ragimabagirova6228]

Спасибо большое)))

[@antonkudrin7060]

Быстро и понятно спасибо )))

[@lets_try_js]

Пожалуйста ))

[@Almas-2002]

Спасибо

[@aiylchiievjs6207]

спасибо большое