Can't figure out correct filter() method syntax in React-CodePudding

I'm trying to make a simple search filter that only shows the names in an array that match the string typed in the input field. However, when I type something in the entire array disappears. I suspect it has something to do with the filter() method but I can't seem to find what the issue is.

App.js

import React, { useState } from 'react';
import SearchBar from './SearchBar';

function App() {
  const names = [
    { id: 1, name: 'arthur' },
    { id: 2, name: 'john' },
    { id: 3, name: 'marlon' },
    { id: 4, name: 'david' },
    { id: 5, name: 'sean' },
    { id: 6, name: 'carlos' },
    { id: 7, name: 'ana' },
    { id: 8, name: 'nigel' },
    { id: 9, name: 'ozzy' },
  ]

  return (
    <div>
      <SearchBar names={names} />
    </div>
  )
}

export default App;

SearchBar.js

import React, { useState } from 'react'

function SearchBar(props) {
    const [searchTerm, setSearchTerm] = useState('')

    const inputHandler = (event) => {
        const input = event.target.value
        setSearchTerm(input)
        console.log(input)
    }

    return (
        <div>
            <form>
                <input onChange={inputHandler} type='text'></input>
            </form>
            <ul>
                {props.names.filter((val) => {
                    if (searchTerm === '') {
                        return val
                    }
                    else if (searchTerm === val.name.toLowerCase().includes(searchTerm.toLowerCase())) {
                        return val
                    }
                }).map((val, key) => <li key={key}>{val.name}</li>)}
            </ul>
        </div>
    )
}

export default SearchBar

CodePudding user response：

Filter method fills the array based on the condition inside it, so if the name includes the character return true, (the val will be present in the result array), else return false(not present in the result array). Represented by the code below

{props.names.filter((val) => {
    if (val.name.toLowerCase().includes(searchTerm.toLowerCase())) {
        return true
    }
    else {
        return false
    }
})

I changed it in your code, test it here:

function SearchBar(props) {
    const [searchTerm, setSearchTerm] = React.useState('')

    const inputHandler = (event) => {
        const input = event.target.value
        setSearchTerm(input)
        console.log(input)
    }

    return (
        <div>
            <form>
                <input onChange={inputHandler} type='text'></input>
            </form>
            <ul>
            {searchTerm}
                {props.names.filter((val) => {
                    if (val.name.toLowerCase().includes(searchTerm.toLowerCase())) {
                        return true
                    }
                    else {
                      return false
                    }
                }).map((val, key) => <li key={val.id}>{val.name}</li>)}
            </ul>
        </div>
    )
}

function App() {
  const names = [
    { id: 1, name: 'arthur' },
    { id: 2, name: 'john' },
    { id: 3, name: 'marlon' },
    { id: 4, name: 'david' },
    { id: 5, name: 'sean' },
    { id: 6, name: 'carlos' },
    { id: 7, name: 'ana' },
    { id: 8, name: 'nigel' },
    { id: 9, name: 'ozzy' },
  ]

  return (
    <div>
      <SearchBar names={names} />
    </div>
  )
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>