Как изменить свойства в объекте React Native?

Question

[Илья Подлесный]

Имеется некая структура с книгами:

import React, { useState } from 'react';
import { View, Text, Linking } from 'react-native';
import {
  Card,
  CardTitle,
  CardContent,
  CardAction,
  CardButton,
  CardImage,
} from 'react-native-material-cards';
import { CheckBox } from 'react-native-elements';

function Book(props) {
  const filterBook = (book, type) => {
    switch (type) {
      case 'popular':
      case 'favourite':
      case 'readed':
        return book[type];
      case 'Adv':
      case 'Dev':
      case 'Manage':
      case 'Seo':
        return book.genres === type;
      default:
        return false;
    }
  };
  const [changeOption] = useState(true);
  return (
    <View>
      {books
        .filter((book) => filterBook(book, props.type))
        .map((book, index) => (
          <Card>
            <CardImage source={book.image} />
            <CardTitle title={book.title} subtitle={book.subtitle} />
            <CardContent text={book.text} />
            <CardAction separator={true} inColumn={false}>
              <CardButton
                onPress={() => Linking.openURL(book.url)}
                title="Читать"
                color="blue"
              />
            </CardAction>

            <CheckBox title="Избранное" checked={changeOption} />

            <CheckBox title="Прочитано" checked={changeOption} />

            <CheckBox title="Хочу прочитать" checked={changeOption} />
          </Card>
        ))}
    </View>
  );
}

export default Book;

let books = [
  {
    id: 0,
    image: { uri: 'https://osipenkov.ru/wp-content/uploads/2018/01/book.jpg' },
    title:
      'Google Analytics для googлят. Практическое руководство по веб-аналитике',
    subtitle: 'Я. Осипенков',
    text: 'Описание книги',
    favourite: true,
    genres: 'Adv',
    popular: false,
    readed: false,
    url: 'https://osipenkov.ru/google-analytics-book/',
  },
  {
    id: 1,
    image: { uri: 'https://media2.24aul.ru/imgs/5b71858b6241400001fef2a5/' },
    title: 'Яндекс.Директ. Как получать прибыль, а не играть в лотерею',
    subtitle: 'Ф. Царевский',
    text: 'Описание книги',
    favourite: false,
    genres: 'Adv',
    popular: true,
    readed: true,
    url:
      'https://www.rulit.me/books/yandeks-direkt-kak-poluchat-pribyl-a-ne-igrat-v-lotereyu-read-437676-1.html',
  },
  {
    id: 2,
    image: {
      uri:
        'https://img.kuplao.ru/etc/media/489x325/product/1/016/1/01125676/1.jpg',
    },
    title: 'HTML5 + CSS3. Основы современного WEB-дизайна',
    subtitle: 'А. Хрусталев, А. Кириченко',
    text: 'Описание книги',
    favourite: true,
    genres: 'Dev',
    popular: false,
    readed: false,
    url:
      'https://www.rulit.me/books/yandeks-direkt-kak-poluchat-pribyl-a-ne-igrat-v-lotereyu-read-437676-1.html',
  },
  {
    id: 3,
    image: {
      uri:
        'https://fleuren.me/image/cache/catalog/Books/5781751-1-1200x800.jpg',
    },
    title: 'Изучаем программирование на JavaScript',
    subtitle: 'Фримен Э., Робсон Э.',
    text: 'Описание книги',
    favourite: false,
    genres: 'Dev',
    popular: true,
    readed: true,
    url:
      'https://www.rulit.me/books/yandeks-direkt-kak-poluchat-pribyl-a-ne-igrat-v-lotereyu-read-437676-1.html',
  },
  {
    id: 4,
    image: {
      uri:
        'https://teletype.in/files/8a/8a131c0d-a1da-4ad6-a66f-73f8996838ce.png',
    },
    title: 'Заряженные на результат',
    subtitle: 'Нил Доши и Линдси Макгрегор',
    text: 'Описание книги',
    favourite: true,
    genres: 'Manage',
    popular: false,
    readed: false,
    url: 'https://www.litmir.me/br/?b=575182&p=1',
  },
  {
    id: 5,
    image: {
      uri:
        'https://www.soyuz.ru/public/uploads/files/37/6981046/600x400_20170326080036fba0a72eff.jpg',
    },
    title: 'Человек решающий',
    subtitle: 'Деннис Бакке',
    text: 'Описание книги',
    favourite: false,
    genres: 'Manage',
    popular: true,
    readed: true,
    url:
      'https://www.rulit.me/books/chelovek-reshayushchij-kak-postroit-organizaciyu-budushchego-gde-resheniya-prinimaet-kazhdyj-read-469909-1.html',
  },
  {
    id: 6,
    image: {
      uri:
        'https://seonomad.net/sites/default/files/book-image/seo_rukovodstvo_po_vnutrennim_faktoram_0.jpg',
    },
    title: 'Руководство по внутренним факторам',
    subtitle: 'Гроховский Л.',
    text: 'Описание книги',
    favourite: true,
    genres: 'Seo',
    popular: false,
    readed: false,
    url:
      'https://www.rulit.me/books/yandeks-direkt-kak-poluchat-pribyl-a-ne-igrat-v-lotereyu-read-437676-1.html',
  },
  {
    id: 7,
    image: {
      uri:
        'https://cv4.litres.ru/pub/c/elektronnaya-kniga/cover_max1500/6492941-i-o-sevostyanov-prodvizhenie-portalov-i-internet-magazinov.jpg',
    },
    title: 'Продвижение порталов и интернет-магазинов',
    subtitle: 'Гроховский Л.',
    text: 'Описание книги',
    favourite: false,
    genres: 'Seo',
    popular: true,
    readed: true,
    url:
      'https://librabook.info/bookread/295539-leonid-grohovskii-prodvizhenie-portalov-i',
  },
];

Суть вопроса - как при помощи чекбоксов менять свойства книг
favourite: false,
popular: true,
readed: true,
Если это вообще возможно. Если нет, то подскажите, куда смотреть для реализации..

Answer 1

[Kirill Makarov]

При нажатии на чекбокс вызываешь функцию где передвешь index или id. Затем по этому индексу находишь объект и в нём меняешь значение но нужно конечно с бэком связь потому что при обновлении все пропадет

Comments

[Илья Подлесный]

Попробую, спасибо. Насчет пропадания после обновления - попробую придумать что-то без бэка, уже примерно накидывал решение. Сейчас главное разобраться с возможностью изменения свойств favourite, popular и readed