<div id="root"></div>
const { useState } = React;

let names = [];
for (let i = 0; i < 100; i++) {
  names.push(faker.name.findName());
};

const List = () => {
  const [filter, setFilter] = useState("");
  
  let filteredNames = names.filter(name => {
    return name.toUpperCase().includes(filter.toUpperCase());
  });
  
  return(
    <>
      <input type="name" onChange={e => setFilter(e.target.value)} className="input" placeholder="filter" />
      <div class="content">
        <ul>
          {filteredNames.map((n, i) => (
            <li key={i}>{n}</li>
          ))}
        </ul>
      </div>
    </>
  );
}

ReactDOM.render(<List />, document.querySelector("#root"));
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js

Packages

This Pen doesn't use any packages.