Блог

Главная - Вопросы по программированию - Список задач в react — как бы вы переместили завершенный элемент

Список задач в react — как бы вы переместили завершенный элемент

#javascript #reactjs #onclick

Вопрос:

Я очень новичок в кодировании и пытаюсь работать над списком задач. Как только я нажму на элемент, я хотел бы иметь возможность отметить его завершенным и переместить в столбец «Завершенные элементы»…

Вот как это выглядит с точки зрения кода до сих пор :

в моем App.js

  

  function markAsCompleted(event) {
      event.preventDefault()
    // ask if an item is complete
    // if it is, move it to completed items 

    }

<li className = 'activities' onClick={markAsCompleted}
                key = {a.text}  > 
                    <FaPaintBrush onClick={ (i) => toggleColor (a) }/>
                     <div 
                     style = {{color: a.color }}>
                      Activity: {a.data.text},
                      Type: {a.data.area}
               </div>
               </li>

Вот мой компонент «завершенные элементы», на данный момент не отображающий ничего, кроме заголовка

 function CompletedItems (props) {
    
    
  
      return (
       
        <label>
        Completed items

        </label>
       
    );
  }
  export default CompletedItems;

Вот как это выглядит на локальном хосте 🙂
Локальный хост

Большое вам спасибо за вашу помощь! Жюли

Комментарии:

1. В react есть много способов сделать это и множество примеров из списка дел. Если бы мне пришлось реализовать что-то подобное на лету, я бы постарался сделать это как можно проще, поэтому не воспринимайте это предложение как «лучший» подход. Я бы создал компонент <Item> с «полным» в качестве логического состояния. onClick => setState(!Предыдущее состояние) (или просто setState(true)), все, что подходит. А затем в вашем основном компоненте создайте состояние со всеми элементами в элементе списка[]. затем вы можете использовать условный рендеринг в зависимости от того, является ли значение complete истинным или нет

2. Большое вам спасибо за это @Leviathan !!

Метки: