I
I
Ilya Podlesny2020-12-21 17:28:06
React Native
Ilya Podlesny, 2020-12-21 17:28:06

How to change properties in React Native object?

There is a certain structure with books:

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',
  },
];


The essence of the question is how to change the properties of
favorite books: false,
popular: true,
readed: true with the help of checkboxes,
if at all possible. If not, then tell me where to look for implementation ..

Answer the question

In order to leave comments, you need to log in

1 answer(s)
K
Kirill Makarov, 2020-12-21
@kirbi1996

When you click on the checkbox, you call the function where you move the index or id. Then you find the object at this index and change the value in it, but of course you need to connect with the back because everything will be lost when updating

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question