передача отфильтрованного массива из компонента в компонент

Question

Есть react-приложение — todo-лист. Задача — вывести только те элементы, для которых favorite: true, когда установлен чекбокс.

Стейт — массив с объектами, хранится в App.js:

const [data, setData] = useState([

    { todoName: 'Make a todo list', done: true, favorite: false, edit: false, id: 756357 },
   ...
    { todoName: 'Do nothing', done: false, favorite: true, edit: false, id: 56743454 }
  ]);

Этот массив передаётся через пропсы в компонент TodoItemList, где разворачивается через map. filteredTodos — это массив объектов, ранее отфильтрованный поиском (с ним всё ок).

...
 const todoElements = (

        filteredTodos.map(item => {

            const { id, ...itemProps } = item;

            return (

                <TodoItem

                    key={id}
                    {...itemProps}/> )}))

return {todoElements}

В SearchPanel.js по изменению чекбокса запускается функция handleChange, описанная в App.js. По установке чекбокса она возвращает отфильтрованный массив, оставляя в нём объекты, где favorite: true, а при удалении - возвращает весь массив.

  const [checked, setChecked] = useState(false);

  const handleChange = () => {   

    setChecked(!checked);

    if (!checked) {
      return filteredTodos.filter(item => item.favorite);
    }

    else {
      return filteredTodos;
    }
  }

Вопрос: как объекты, которые возвращает handleChange, передать в TodoItemList, чтобы они разворачивались уже там?

Я могу выводить их в консоль, и они отлично выводятся, всё замечательно, но я ума не приложу как из этой консольной инфы соорудить новую таблицу в другом компоненте.

Answer 1

Это конечно костыль но сделай вот так!!!

создай еще одно состояние массив! и туда передай отфильтрованные данные который возвращает handleChange

` const [filterData, setFilterData] = useState([])

const [checked, setChecked] = useState(false);

const handleChange = () => {

setChecked(!checked);

if (!checked) {
  setFilterData(filteredTodos.filter(item => item.favorite))
} else {
  setFilterData(filteredTodos)
}

} `

потом filterData можешь передавать через props к компоненту. Если не поймешь то напишу мне в твиттер!

БЛОГ НА HUSL

передача отфильтрованного массива из компонента в компонент

Ответы (1 шт):