const FiltersContext = createContext({ filters: {} });

function App({ filters, items }) {
  return (
    <FiltersContext.Provider value={{ filters }}>
      {items.map(i => <Item key={i.id} />)}
    </FiltersContext.Provider>
  );
}

{items.map((item, index) => (
  <li key={index}>
    <input value={item.name} />
  </li>
))}

{items.map((item) => (
  <li key={item.id}>
    <input value={item.name} />
  </li>
))}

const sortBy = (arr, keys) => [...arr].sort((a, b) =>
  keys.reduce((res, k) => res || (a[k] > b[k] ? 1 : a[k] < b[k] ? -1 : 0), 0)
);

<button hx-get="/api/articles" hx-target="#list" hx-swap="innerHTML">
  Загрузить статью
</button>

<div id="list"></div>