Как создать Аккордеон Компонент в React JS за 7 минут

Ссылка на исходники в Телеграм👉 t.me/tipichnyj...
В этом видео создаем Аккордеон меню в React JS без использования каких-либо дополнительных библиотек.
• React JS | GSAP
• React JS | Изображения...
• React JS | Menu
• React JS | Хуки
• React JS | Полезные фишки
• IT-ЛайфXаки

[@ЯнаПронько-ы7ъ]

Спасибо! Быстро, четко по делу и с объяснением!

[@dez1ess]

огромное тебе спасибо, несколько месяцев не знал как решить вопрос с плавной анимацией раскрытия!! Лучший

[@twitch.tv.disablee00]

несколько месяцев? можно в гугле за минуту найти

[@illiabulgakov2013]

Привет, спасибо тебе большее за это видео, оно мне очень сильно помогло!!! 👍👍👍

[@NikitaNechaev-z5j]

Спасибо!

[@aminabu5985]

Удивительная работа коротко и ясно. Хочу только спросить, почему создали компонент AccordionItem ? Как она влияет на плавность раскрытия и закрытия ? Если его не создать не получится плавность ?
Заранее благодарю за ответ )

[@tipichnyj_web_razrabotchik]

Привет. AccordianItem произвольное название, у нас есть ненумерованный список ul с элементами li (list items), поэтому логично назвать accordionItem. Это никак не влияет на плавность. Можно взять div вместо ul и li. Плавность появляется за счет transition: height 0.3s; в файле Accordion.css.

[@aminabu5985]

@@tipichnyj_web_razrabotchik нет я не про название,а про то, что вы создали новый компонет и передали в нее пропсы. Т.е. вы изменили первоначальный ваш код, дабы сделать возможным плавность ?

[@MrUnknownman1986]

Вы оперируете isOpen, изменяя его состояние с true на false, но для этого не использете usestate. Почему ? Как так ?
Объясните пожалуйста или я где-то чего-то не понял

[@tipichnyj_web_razrabotchik]

Привет. В этом аккордеоне использую ненумерованный список ul и элементы li. Разворачиваю все это дело через map. У каждого li есть свой порядковый номер id, при клике по li обновляю состояние openId = id, или если openId уже равно этому id то обновляю состояние openId = null. При каждом обновлении состояния setId происходит сравнение isOpen={id === openId}, получается isOpen не хранится в состоянии, но его значение true или false зависит от состояния. Такая схема позволяет управлять всем аккордеоном с помощью одного openId. Из минусов - нет возможности открыть сразу несколько элементов.
export const Accordion = ({ faqList }) => {
const [openId, setId] = useState(null);
return (
{faqList.map((faqItem, id) => {
return (
(id === openId ? setId(null) : setId(id))}
faqItem={faqItem}
isOpen={id === openId}
key={id}
/>
);
})}
);
};

[@MrUnknownman1986]

@@tipichnyj_web_razrabotchik Большое спасибо за ответ, немножечко понятней стало , я так понимаю мы одним выстрелом убиваем 2 зайцев, чтобы не использовать 2 раза usestate, а вытягиваем его из одного. Правильно я понимаю ?
А вообще как вы изучили react, javascript, может какие-нибудь курсы посоветуете или может быть методы изучения ?

[@tipichnyj_web_razrabotchik]

У меня долгая история, сначала где-то в 2010 я начал изучать html css js, было просто интересно, затем была HTML Академия, потом практика в реальной компании, сначала тестировщиком, позднее верстальщиком. Позже было 2 года в RS-Sсhool, у них есть бесплатные курсы по JS и React. Много опыта приносит работа в команде и советы тимлида. Нужно практиковаться каждый день, и каждый день решать какие-нибудь нестандартные задачи. (Например тут - www.codewars.com ) Книги читать наверно нет смысла, т.к. обычно нужна не вся книга, а решение небольшой конкретной задачи.

[@ЯнаПронько-ы7ъ]

@@tipichnyj_web_razrabotchik Ооо, RS School! Я тоже проходила) вот только нашла первую работу, не мечты, кончено, но хоть нашла)

[@MrUnknownman1986]

А есть github, источник кода ... ?

[@tipichnyj_web_razrabotchik]

Привет. Под видео ссылка на телеграм, там есть ссылка на Github c исходниками.

[@sia4281]

То что надо, супер!

[@alekspodobashev518]

Подскажите пожалуйста, можно ли как-нибудь сделать так, чтобы по умолчанию первый элемент был сразу открытым?

[@tipichnyj_web_razrabotchik]

Привет. Добавь useEffect(() => { setId(0); }, []); и по умолчанию будет открываться нулевой элемент.
export const Accordion = ({ faqList }) => {
const [openId, setId] = useState(null);
useEffect(() => {
setId(0);
}, []);
return (
{faqList.map((faqItem, id) => {
return (
(id === openId ? setId(null) : setId(id))}
faqItem={faqItem}
isOpen={id === openId}
key={id}
/>
);
})}
);
};