react-fuse - how to perform specific search with fuse

I am having trouble performing an aggressive search with fuse, where my search result will only return the one item with matching title, or role from either Buffed or Nerfed genre.

I have a json file where I am pulling data from using Firebase. This is my json file:

//Buffed
    firebase.firestore().collection('Buffed').add({
        id: getUUID(),
        title: 'Cyclops',
        description: 'A mysterious celestial traveler' 
        role: 'Mage',
        genre: 'Buffed',
    });
    firebase.firestore().collection('Buffed').add({
        id: getUUID(),
        title: 'Esmeralda',
        description: 'Family Member of Agelta' 
        role: 'Mage',
        genre: 'Buffed',
    });
    firebase.firestore().collection('Buffed').add({
        id: getUUID(),
        title: 'Paquito',
        description: 'Nobody' 
        role: 'Fighter',
        genre: 'Buffed',
        
    });
//Nerfed
    firebase.firestore().collection('Nerfed').add({
        id: getUUID(),
        title: 'Hayabusa',
        description:'Shadow Warrior'
        role: 'Assassin',
        genre: 'Nerfed',
    });
    firebase.firestore().collection('Nerfed').add({
        id: getUUID(),
        title: 'Karrie',
        description: 'War Machine'
        role: 'Marksman',
        genre: 'Nerfed',
    });
    firebase.firestore().collection('Nerfed').add({
        id: getUUID(),
        title: 'Gloo',
        description: 'Dark Creature'
        role: 'Tank',
        genre: 'Nerfed',
    });

I am getting these data from Fireabase using this filter.js file:

export default function selectionFilter({ Nerfed, Buffed } = []) {

    return {
      Buffed: [
        { title: 'Buffed', data: Buffed?.filter((item) => item.genre === 'Buffed') },
      ],
      Nerfed: [
        { title: 'Nerfed', data: Nerfed?.filter((item) => item.genre === 'Nerfed') },
      ],
 };
  }

This is my search function located in a index.js file under header:

Header.Search = function HeaderSearch({ searchTerm, setSearchTerm, ...restProps }) {
  
  const [searchActive, setSearchActive] = useState(false);

  return (
    <Search {...restProps}>
      <SearchIcon onClick={() => setSearchActive((searchActive) => !searchActive)} data-testid="search-click">
        <img src="/images/icons/search.png" alt="Search" />
      </SearchIcon>
      <SearchInput
        value={searchTerm}
        onChange={({ target }) => setSearchTerm(target.value)}
        placeholder="Search Heroes"
        active={searchActive}
        data-testid="search-input"
      />
    </Search>
  );
};

This is my index.js file where I am doing my search using Fuse.

import React, { useState, useEffect, useContext } from 'react';
import { Card, Header, Loading} from '../components';

export function BrowseContainer ({slides}) {

  const [category, setCategory] = useState('Buffed');
  const [searchTerm, setSearchTerm] = useState('');
  const [slideRows, setSlideRows] = useState([]); 

  useEffect(() => {
    setSlideRows(slides[category]);
  },
  
  [slides, category]);

  useEffect(() => {
    
    const fuse = new Fuse(slideRows, { keys: ['data.genre','data.description', 'data.title', 'data.role'] });

    const results = fuse.search(searchTerm).map(({ item }) => item);

    if (slideRows.length > 0 && searchTerm.length > 3 && results.length > 0) {
      setSlideRows(results);
    } else {
      setSlideRows(slides[category]);
    }
  }, [searchTerm]) ;
 
return profile.displayName ? (
  <Header.Frame>
          <Header.Group>
            <Header.TextLink active={category === 'Buffed' ? 'true' : 'false'} onClick={() => setCategory('Buffed')}>
              Buffed
            </Header.TextLink>
            <Header.TextLink active={category === 'Nerfed' ? 'true' : 'false'} onClick={() => setCategory('Nerfed')}>
              Nerfed
            </Header.TextLink>
           </Header.Group>
           <Header.Group> 
            <Header.Search searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
           </Header.Group>
           <Card.Group>
        {slideRows.map((slideItem) => (
          <Card key={`${category}-${slideItem.title.toLowerCase()}`}>
            <Card.Title>{slideItem.title}</Card.Title>
            <Card.Entities>
              {slideItem.data.map((item) => (
                <Card.Item key={item.docId} item={item}>
                  <Card.Image src={`/images/${category}/${item.title}/small.jpg`} />
                  <Card.Meta>
                    <Card.SubTitle>{item.title}</Card.SubTitle>
                    <Card.Text>{item.role}</Card.Text>
                  </Card.Meta>
                </Card.Item>
              ))}
            </Card.Entities>
            <Card.Feature category={category}>  
            </Card.Feature>
          </Card>
        ))}
      </Card.Group>

)}

My search cons Result is returning the entire slideRow where the searched item is located. I only want to return the one item with matching title, or role from either Buffed or Nerfed genre.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/EweaSqm