ну вот так не сработает <button onClick={setCount(count+1)}>
наверное setCount должен быть в теле функции, каким то образом использует замыкание для своей работы?

Онклик должен получить функцию в качестве параметра

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

Всем привет ребята подскажите как делать список todo с вложенными списками желательно на хуках , обычный список я сделал , а вот при добавлении вложенных пунктах они добавляются ко всем пунктам списка

Код в студию

спасибо!)

Он хочет сказать передай функцию (название) а не вызов её с результатом

А как же анонимки тогда

В чем разница с анонимками?

Если не хочешь название то анонимку

У анонимок имени нет))

2

В том что ты их прямо на месте создаешь и у них нету имени

привет, подскажите какие-то красивые готовые анимации которые можно сделать для переходов между страниками, с использыванимем react transition group / или посоветуйте что-то похожее, нужно сделать анимации между переключенимем страниц, буду очень благодарен

а если просто this то там все есть, я немного не понял почему так он не стал искать ничего

гуглите "потеря контекста вызова реакт", ну а лучше не мучайтесь вы с этими класбейзд компонентами, изучайте хуки

это app.js  const App = () => {
 const [todos, setTodos] = useState([]);
 console.log(todos);
 return (
   <div className="App">
     <h1>список заметок!</h1>
     <TodoList
       todos={todos}
       deleteTodo={(todoIndex) => {
         const newTodos = todos.filter((_, index) => index !== todoIndex);
         setTodos(newTodos);
       }}
       moveUp={(todoIndex) => {
         [todos[todoIndex], todos[todoIndex - 1]] = [
           todos[todoIndex - 1],
           todos[todoIndex]
         ];
         setTodos([...todos]);
       }}
       moveDown={(todoIndex) => {
         console.log(todoIndex);
         [todos[todoIndex], todos[todoIndex + 1]] = [
           todos[todoIndex + 1],
           todos[todoIndex]
         ];
         setTodos([...todos]);
       }}
     />
     <TodoForm
       saveTodo={(todoText) => {
         const trimmedText = todoText.trim();
         if (trimmedText.length > 0) {
           setTodos([...todos, trimmedText]);
         }
       }}
     />
   </div>
 );
};

export default App;

тоесть просто этот вызов прокинуть в дочерний компонент и там вызывать его при клике?

const TodoList = ({ todos, deleteTodo, moveDown, moveUp }) => {
 const [todos2, setTodos2] = useState([]);
 console.log(todos2);
 return (
   <>
     <List>
       {todos.map((todo, index) => (
         <>
           <ListItem key={index.toString()} dense>
             <ListItemText primary={todo} />

             <ListItemSecondaryAction>
               <IconButton
                 aria-label="Delete"
                 onClick={() => {
                   deleteTodo(index);
                 }}
               >
                 <DeleteIcon />
               </IconButton>
             </ListItemSecondaryAction>
             <ListItemText>
               <TodoFormInner
                 saveTodo={(todoText) => {
                   const trimmedText = todoText.trim();
                   if (trimmedText.length > 0) {
                     setTodos2([...todos2, trimmedText]);
                   }
                 }}
               />
             </ListItemText>
             <ListItemText>
               {index ? (
                 <ArrowUpwardSharpIcon
                   onClick={() => {
                     moveUp(index);
                   }}
                 />
               ) : (
                 ""
               )}
             </ListItemText>
             <ListItemText>
               {index === todos.length - 1 ? (
                 ""
               ) : (
                 <ArrowDownwardSharpIcon
                   onClick={() => {
                     moveDown(index);
                   }}
                 />
               )}
             </ListItemText>
           </ListItem>
           <TodoListInner todos2={todos2} />
         </>
       ))}
     </List>

     {console.log(todos)}
   </>
 );
};

Самая красивая анимация - это ее отсутствие и мгновенные переходы