How to filter from Observable Map in React?

Question

I have an React Component Which Consists Dropdown , the dropdown has 4 values 'requsted,all,taken,available' and initially all the List of item are loaded. Each Item has isRequested,isTaken and isAvailable. Now, I need to filter those arrays accordingly to dropdown but i am getting something else as an output

My React Component is:

import React, { useContext, useEffect, SyntheticEvent, useState } from 'react'
import { observer } from 'mobx-react-lite';
import { Dropdown, Segment, Item, Icon, Label, Button, Select } from 'semantic-ui-react';
import { BooksStatus } from '../../app/common/options/BookStatus';
import { RootStoreContext } from '../../app/stores/rootStore';
import { format } from 'date-fns';
import { NavLink } from 'react-router-dom';
import { id } from 'date-fns/esm/locale';



const LibrarianManager: React.FC = () => {

    const rootStore = useContext(RootStoreContext);
    const { loadBooks, getAvailableBooks, deleteBook } = rootStore.bookStore;

    const [status, setStatus] = useState(BooksStatus[0].value);

    useEffect(() => {
        loadBooks();
    }, [loadBooks]);

    const onChange = (value: any) => {
        setStatus(value)
        console.log(value)

        if (value === 'requested') {
              if (value === 'requested') {
            getAvailableBooks.filter(data => data.isRequested == true)
            console.log(getAvailableBooks)
        }
        }
    }

    return (
        <div>
           
            <Select
                value={status}
                onChange={(e, data) => onChange(data.value)}
                options={BooksStatus}
            />

            {getAvailableBooks.map(books => (
                <Segment.Group key={books.bookName}>
                    <Segment>
                        <Item.Group>
                            <Item>
                                <Item.Image size='tiny' circular src='/assets/books.jpg' />
                                <Item.Content>
                                    <Item.Header as={NavLink} to={`/booksDetail/${books.id}`} >{books.bookName}</Item.Header>                               
                                </Item.Content>
                            </Item>
                        </Item.Group>
                    </Segment>
                   
                    <Segment clearing>
                        <span></span>
                    </Segment>
                </Segment.Group>
            ))}
        </div>
    )
}

export default observer(LibrarianManager);

My Map Functions is :-

  @computed get getAvailableBooks() {
    return Array.from(this.bookRegistry.values());
  }

  @action loadBooks = async () => {
    this.loadingInitial = true;
    try {
      const books = await agent.Books.list();
      runInAction("loading books", () => {
        books.forEach((books) => {
          books.issuedOn = new Date(books.issuedOn);
          this.bookRegistry.set(books.id, books);
        });
        this.loadingInitial = false;
      });
    } catch (error) {
      runInAction("load books error", () => {
        this.loadingInitial = false;
      });
    }
  };

and my data Model or the item is

export interface IBooks {
  id: number;
  bookname: string;
  issuedOn: Date;
  returnDate: Date;
  isReturned: boolean;
  isRequested: boolean;
  isAvailable: boolean;
  isTaken: boolean;
  name: string;
  requestedBy: string;
}

while trying by this method

if (value === 'requested') {
              if (value === 'requested') {
            getAvailableBooks.filter(data => data.isRequested == true)
            console.log(getAvailableBooks)
        }

in console i am getting all the list without filtering

One suggestion, if you are using mobx it is a good practice to separate View from the Model which makes it easier to test (i.e. try not to use React.useState). — radulle, Jul 23 '20 at 20:30
Thanks a lottttt!!! I am just new to react and mobx. I just tried removing use state and using through MobX it was good. Thanks — Biraz Dahal, Jul 23 '20 at 21:07

score 1 · Accepted Answer · answered Jul 23 '20 at 20:25

1

Array.filter doesn't mutate the original array but returns a new one which is nice (MDN).

What you want is:

const filteredBooks = getAvailableBooks.filter(data => data.isRequested == true)
console.log(filteredBooks)

answered Jul 23 '20 at 20:25

radulle

1,437
13
19

How to filter from Observable Map in React?

1 Answers1