это 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)}
   </>
 );
};

полотно кода кидать бесполезно. Слушайся Диму

понял ссылка на репу норм?

Нельзя использовать индекс массива в качестве ключа, пожалуйста

@zarabotaet ну тогда надо было остановится еще на хтмл, чо дальше полезли то)

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

нууу это как бы вы написали)

Я вообще не понимаю, как оно работает

ни у кого никаких мыслей?