filtering through array of strings doesn't include the first character

Question

I have a search bar that filters through an array containing one object:


const [termList, setTermList] = useState([{term_name: 'Name', definition: 'This is a glossary term'}]);

const filtered = termList.filter((term) =>
    Object.values(term).some(
      (val) =>
        typeof val === "string" &&
        term.term_name.includes(searched.toLowerCase())
    )
  );

return (
    <div>
        <input
          type="text"
          value={searched}
          onChange={(ev) => setSearched(ev.target.value)}
        />
      </div>
      <div className="termList">
        {filtered.map((term) => (
            <div>
              <div>{term.term_name.toLowerCase()}</div>
              <div>{term.definition}
            </div>
        ))}
    </div>
  );

When I filter through the list, however, if I type into the search bar the letter 'n', my filtered list is empty even though the only object inside the array has a name that begins with an 'n'.

Even more odd is that when I type into the search bar 'a', 'am', or 'ame' my filtered list includes the object.

dave · Accepted Answer · 2022-06-28 20:42:06Z

1

You are making you searched lowercase but not term.term_name, 'n' is not in 'Name', 'N' is. You need to do

term.term_name.toLowerCase().includes(searched.toLowerCase())

answered Jun 28, 2022 at 20:42

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yehuda Over a year ago

Yeah this worked, but can you explain a bit more of what that fixed?

dave Over a year ago

term.termName is Name. It consists of four characters: N,a,m,e. When you check if ['N','a','m','e'].includes('n') it correctly returns false. If you first make term.termName lowercase, it checks if ['n','a','m','e'].includes('n') and returns true

Ahmad · Accepted Answer · 2022-06-28 21:11:53Z

1

you can also do like this, instead of making filtered function

const [termList, setTermList] = useState([{term_name: 'Name', definition: 'This is a glossary term'}]);

return (
    <div>
        <input
          type="text"
          value={searched}
          onChange={(ev) => setSearched(ev.target.value)}
        />
      </div>
      <div className="termList">
        {termList.filter(item => (search ? item.term_name?.toLowerCase().includes(searched.toLowerCase()) : true)).map((term) => (
    <div>
      <div>{term.term_name.toLowerCase()}</div>
      <div>{term.definition}
    </div>
))}
    </div>
  );

edited Jun 28, 2022 at 21:11

answered Jun 28, 2022 at 20:56

Ahmad

1,5191 gold badge6 silver badges12 bronze badges

Collectives™ on Stack Overflow

filtering through array of strings doesn't include the first character

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related