Can someone explain the concept of searching for tunulul. For example, I have a component that rents the task itself.

& lt; listtasks / & gt;

Different Props come to it from redux . And such a component is drawn on the page a large amount, depending how many tasks will create a user. And I would like to have a search, when entering into which already with 1 letter, he showed only those tasks in which there is such a value. Here are just the examples that I found on the Internet or very old, or do not fit me.

Here is the initial state :

const initialstate = {
  Tasks: []
};

That’s what in it when the Redresser works when creating a touch:

Tasks: [{
    ID: Shortid.Generate (),
    Task: Action.Task,
    Status: False.
    }, ... state.tasks]

Answer 1, Authority 100%

There is no concept standard data filtering by value. I think the logic of the TODO sheet is not correctly written.

Firstly, a component that draws tasks must be one. In the input receives a list of tasks and shows them to the user. ListTasks

const listtasks = props = & gt; {
 Return (
  & lt; ul classname = "TODOS" & gt;
   {Pros.Todos.map (EL = & GT; (
    & lt; li key = {el.id} & gt; {el.task} & lt; / li & gt;
   ))}
  & lt; / ul & gt;
 );
};

still need a component that will perform search Let’s call it Search which has one input

const search = props = & gt; {
 Return (
  & lt; input
   ONCHANGE = {({target: {value}}) = & gt; Pros.Search (Value)}
   Type = "Text"
   Placeholder = "Search Here ..."
  / & gt;
 );
};

The main component that will show these two and will filter App with the search function>All logic of this feature is written in the comments inside the function.

const app = () = & gt; {
 const initialarr = [
  {
   ID: 1,
   Task: "Take Out The Trash",
   Status: False.
  },
  {
   ID: 2,
   Task: "Dinner with Wife",
   Status: True.
  },
  {
   ID: 3,
   Task: "Meeting WITH BOSS",
   Status: False.
  }
 ];
 const [TODOS] = USESTATE (INITIALARR);
 Const [Filtered, setFiltered] = Ussestate ([]);
 useeffect (
  _ = & gt; {
   SetFiltered (TODOS);
  },
  [TODOS]
 );
 Const Search = Val = & gt; {
  // Current Tasks and New Filtered Tasks
  Let currenttodos = [], newlist = [];
  if (Val! == "") {
   // Make a copy of our STAT
   currenttodos = TODOS;
   // Filter State in search of coincidences
   NewList = CurrentTodos.Filter (TODO = & GT; {
    // The value that the user has entered and which we have
    // in the steight make lower case letters so that there are no conflicts
    // Is it new if the user is introduced with lower case letters and we have capital
    const lc = TODO.TASK.TOLOWERCASE ();
    Const Filter = Val.TolowerCase ();
    // Checking if we have this item if we return it
    RETURN LC.INCLUDES (FILTER);
   });
  } else {
   // if there is nothing in the Input that is, the user erased
   // What I entered then return all the tasks
   newlist = TODOS;
  }
  setfiltered (newlist);
 };
 Return (
  & lt; & gt;
   & lt; search {... {search}} / & gt;
   & lt; listtasks TODOS = {Filtered} / & gt;
  & lt; / & gt;
 );
};

Link to Codesandbox