Breaking News: Grepper is joining You.com. Read the official announcement!

React - Filter List Based on User Input

Curious Cat answered on December 26, 2022 Popularity 3/10 Helpfulness 4/10

answer React - Filter List Based on User Input

related React - Filter List Based on User Input

React - Filter List Based on User Input

Comment

import React from 'react';

const App = () => {
  const users = [{ name: 'Robin' }, { name: 'Markus' }];
  const [query, setQuery] = React.useState('');

  const handleChange = event => {
    setQuery(event.target.value);
  };

  return (
    <div>
      <ul>
        {users
          .filter(user => user.name.includes(query))
          .map(user => (
            <li>{user.name}</li>
          ))}
      </ul>

      <input type="text" onChange={handleChange} />
    </div>
  );
};

export default App;

Popularity 3/10 Helpfulness 4/10 Language javascript

Source: www.robinwieruch.de

Tags: filter javascript list user-input

Link to this answer
Share Copy Link

Contributed on Dec 26 2022

Curious Cat

0 Answers Avg Quality 2/10

Closely Related Answers

React - Filter List Based on User Input

Comment

import React from 'react';

function doFilter(query) {
  return function(user) {
    return user.name.includes(query);
  };
}

const App = () => {
  const users = [{ name: 'Robin' }, { name: 'Markus' }];
  const [query, setQuery] = React.useState('');

  const handleChange = event => {
    setQuery(event.target.value);
  };

  return (
    <div>
      <ul>
        {users.filter(doFilter(query)).map(user => (
          <li>{user.name}</li>
        ))}
      </ul>

      <input type="text" onChange={handleChange} />
    </div>
  );
};

export default App;

Popularity 3/10 Helpfulness 2/10 Language javascript

Source: www.robinwieruch.de

Tags: list filter javascript user-input

Link to this answer
Share Copy Link

Contributed on Dec 26 2022

Curious Cat

0 Answers Avg Quality 2/10

React - Filter List Based on User Input

Contents

More Related Answers

React - Filter List Based on User Input

Closely Related Answers

React - Filter List Based on User Input

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.