Только учусь работать на React. Решил написать кнопку. Повесил onClick на компонент ( например, ), ничего не произошло. Тогда я повесил onClick на div, в котором лежат другие компоненты и словил ошибку
react-dom.development.js:14199 Uncaught Error: SiteMusic(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Писал код в .jsx файлах. Ошибка в где-то в этом коде
import MusicLineInSiteMusic from "./components/MusicLineInSiteMusic.js"//Импортируем компоненты
import MusicList from "./components/MusicList.js"; //Импортируем компоненты
const { useEffect, useState } = React; //Подключаем нужные Хуки
function SiteMusic() {
const [MusicLinesInMusicList,SetMusicLineInMusicList] = useState([]),/* Определяем массив с песнями*/
[IsMusicListShowing, SetShowMusicList] = useState(0) /* Состояние отвечающее за видимость MusicList */;
function ShowMusicList()/*:void Показываем MusicList*/{
SetShowMusicList(IsMusicListShowing + 1);
}
function hideMusicList() /*:void скрываем MusicList*/{
SetShowMusicList(IsMusicListShowing - 1);
}
if(IsMusicListShowing == 0) { //Если мы не должны показать MusicList, не рисуем его. Так же добавляем кнопку для того, что показать MusicList
return (
<div onClick={ShowMusicList}>
<MusicLineInSiteMusic></MusicLineInSiteMusic>
</div>
);
} else {/* Если мы должны показать MusicList, отрисовываем его. Так же добавляем кнопку для того, чтобы скрыть MusicList */
<div>
<MusicLineInSiteMusic onClick={hideMusicList}></MusicLineInSiteMusic>
<MusicList MusicLinesInMusicList={MusicLinesInMusicList}></MusicList>
</div>
}
}
const To = document.getElementById("MusicInSiteLine"); // Указываем место, куда мы будем добавлять изменения
ReactDOM.render(<SiteMusic/>, To); //Добавляем изменения на сайт.
Ошибка срабатывает после клика по элементу. Где я ошибся
