Как сделать такой поиск?

Question

[1233211]

У меня в приложении все страницы обёрнуты в PageWrapper:

<Header />
{children}
<Footer />

На одной из страниц надо добавить в header иконку поиска.
При нажатии на которую должен появляться поиск вместо header.
И при вводе данных в строку поиска, нужно отобразить результаты на странице.

Как это правильно реализовать?

Answer 1

[Natebash]

В header добавляете иконку, на иконку событие клика которое скроет header и покажет вместо нет строку поиска.
Когда будете заполнять поиск, на инпут вешаете дебаунс, и выполняете поиск элементов. Выводите их. При закрытии поиска вызывается хэндлер на закрытие поиска и показ header

Comments

[1233211]

Мне нужно это только для одной страницы сделать. Тут в принципе понятно, можно по роутер определить страницу.
Как я понял, вы предлагаете в pageWrapper отрисовывать header или поиск как-то так?

{showSearch ? <Search /> : <Header />}
{children}
<Footer />

Но вот как тогда правильно пробросить данные из поиска в компонент?

[Natebash]

Обернуть это все в Context и получать доступ к текущему состоянию из контекста