Компонент filter

<input type="text" />

<Filter list={['Ехал','Грека']} />

let render = function (component, initState = {}, mountNode = 'app') {
  initState.render = function( stateRepresentation, options = {} ) {
    const start = (options.focus) ? document.getElementById(options.focus).selectionStart : 0;
    (document.getElementById(mountNode) || {}).innerHTML = stateRepresentation
    if (options.focus) {
      let f = document.getElementById(options.focus)
      f.selectionStart = start
      f.focus()
    }
  }
 
  let stateRepresentation = component(initState)
 
  initState.render((typeof stateRepresentation === 'function' ) ? stateRepresentation() : stateRepresentation)
}
 
let intent = function(i, f) {
  window[i || '_'] = f 
}
 
let value = function(el) {
  return document.getElementById(el).value
}
 
 
let TodoApp = function({render}) {
  let state = { items: [], text:'', render }
  
  intent( "addTodo", function(e) {
    const newItem = {
      text: value("text")
     }
    state.items.push(newItem)
    state.text = ''
    state.render(representation())
    return false
  })
 
  let representation = () => `
      <div>
        <h4>TODO</h4>
        ${TodoList({items:state.items})}
        <form onsubmit="addTodo()">
          <input id="text" value=${state.text}>
          <button>
           Add #${state.items.length + 1}
          </button>
        </form>
      </div>`
 
  return representation
}
 
 let TodoList = ({items, onclick}) => `
    <ul>
      ${items.map(item => `<li key="${item.id}" ${(onclick) ? `onclick="${onclick}(${item.id})"` : ``}>${item.text}</li>`)}
    </ul>`
 
let MarkdownEditor = function({defaultValue, render}) {
  let state = { value: defaultValue || 'Type some *markdown* here!', render }
 
  let input = "mde"
  intent("handleChange", function () {
    state.value = value(input)
    state.render(representation(), {focus: input})
    return false
  })
 
  const md = new Remarkable();
 
  let representation = () => `
      <h3>Input</h3>
      <textarea id="${input}" oninput="handleChange()">${state.value}</textarea>
      <h3>Output</h3>
      <div>
      ${md.render(state.value)}
      </div>
      `
  return representation
}
 
 
render(
  TodoApp, {},
  "todo"
)

import React from 'react';
import ReactDOM from 'react-dom';
 
const Filter = ({ items }) => {
  const [text, setText] = React.useState('');
 
  const onChangeHandler = React.useCallback((e) => {
    setText(e.target.value);
  }, []);
 
  const list = items
    .filter((d) => text === '' || d.startsWith(text))
    .map((d, index) => <li key={index}>{d}</li>);
 
  return (
    <div>
      <input type="text" onChange={onChangeHandler} />
      <ul>{list}</ul>
    </div>
  );
};
 
const App = () => {
  const texts = ['abc', 'abcd', 'apdsa', 'eccs', 'ekoi'];
  return <Filter items={texts} />;
};
 
ReactDOM.render(<App />, document.getElementById('root'));