Ошибка "default.filter is not a function"

Question

Я пытаюсь использовать .filter для того, чтобы оставить в массиве только те строки, в которых есть искомая подстрока.

import logo from './logo.svg';
import './App.css';
import React from 'react';
import items from './Item'
import ReactDOM from 'react-dom';

let foundedItems = [];
var j = 0;

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }

  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
    foundedItems = items.filter(function(item) {
      return item.toLowerCase().indexOf(this.state.username.toLowerCase()) !== -1;
    });
  }

  render() {
    return (
          <form>
            <input
              type='text'
              onChange={this.myChangeHandler}
            />
          </form>
    );
  }
}

ReactDOM.render(
  <React.StrictMode>
    <div>{foundedItems.map(item => <div class = "item">{item}</div>)}</div>
  </React.StrictMode>,
  document.getElementById('blog')
);

export default MyForm;

Что мне сделать, чтобы избежать ошибки default.filter is not a function? default нигде не использую, но ошибка именно такая

Answer 1

В стейт сохраняем строку по которой нужно фильровать список. Далее при отрисовке списка сначала фильтруем его. Получается примерно так:

// import React from "react";

const itemsToFilter = [
  { id: 1, name: "Mary" },
  { id: 2, name: "Mandy" },
  { id: 3, name: "Manson" },
  { id: 4, name: "John" },
];

const App = () => {
  const [filter, setFilter] = React.useState("");

  return (
    <div>
      <div>
        <label>Filter it:</label>
        <input
          type="text"
          value={filter}
          onChange={({ target: { value } }) => setFilter(value)}
        />
      </div>
      <div>
        Items:
        {itemsToFilter
          .filter((item) =>
            item.name.toLowerCase().includes(filter.toLowerCase())
          )
          .map(({ id, name }) => (
            <div key={id}>Name: {name}</div>
          ))}
      </div>
    </div>
  );
};

// export default App;

ReactDOM.render(<App />, document.getElementById('root'));

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

БЛОГ НА HUSL

Ошибка "default.filter is not a function"

Ответы (1 шт):