Conditional rendering with every Update in text of search-field in a Todo List App

Question

I have a react To Do list and i display an array of components when the app is first loaded and whenever a user types in some string in search field i wish to make an regex comparison and conditionally render only those components that match....

My UI may give u a better idea, have a look...

I wish that if i type Al only Alomond should be displayed and Buy milk, Buy toast should not show up...

Here is the code of my regex comparision...

var searchRegex = new RegExp("/" + searchValue + "/gt");
      console.log("--------------------------------", searchValue);

      let tempitems = items.filter(
        (item) => item.title.search(searchRegex) != -1
      );
      let tempdeletedItems = deletedItems.filter(
        (item) => item.title.search(searchRegex) != -1
      );
      setContent(
        <div>
          {tempitems.map((item) => (
            <ToDoPane
              item={item}
              delFunc={deleteItem}
              done={addToDeletedItems}
              edit={editItem}
            />
          ))}
          <div className="doneWalaDiv">
            {tempdeletedItems.map((item) => (
              <ToDoPane
                item={item}
                delFunc={deleteFromDeletedItems}
                done={addItem}
                edit={editItem}
                type="checked"
              />
            ))}
          </div>
        </div>
      );

🙋 How can i Conditionally render the following code 🙋

You Can View The Completete Base Component over here 👉 https://pastebin.com/VWk0tEDq

Answer 1

const [searchValue, setsearchValue] = React.useState("");
const handleChange = (val) => {
    setsearchValue(val);
  };
  useEffect(() => {
    display(searchValue);
  }, [searchValue]);


  function display(searchValue) {
    if (searchValue === '') {
      return <div>
      {items.map((item) => (
        <ToDoPane
          item={item}
          delFunc={deleteItem}
          done={addToDeletedItems}
          edit={editItem}
        />
      ))}
      <div className="doneWalaDiv">
        {deletedItems.map((item) => (
          <ToDoPane
            item={item}
            delFunc={deleteFromDeletedItems}
            done={addItem}
            edit={editItem}
            type="checked"
          />
        ))}
      </div>
    </div>;
    } else {
      // var searchRegex = new RegExp(searchValue);
      // searchRegex+='gi';
      // console.log('regex ye nikal ke aya h ',searchRegex);

      let tempitems = items.filter(
        (item) => item.title.search(searchValue)!=-1
      );
      let tempdeletedItems = deletedItems.filter(
        (item) => item.title.search(searchValue)!=-1
      );
      console.log('Ye sab filter hua saman h',tempitems,tempdeletedItems);
      return <div>
      {tempitems.map((item) => (
        <ToDoPane
          item={item}
          delFunc={deleteItem}
          done={addToDeletedItems}
          edit={editItem}
        />
      ))}
      <div className="doneWalaDiv">
        {tempdeletedItems.map((item) => (
          <ToDoPane
            item={item}
            delFunc={deleteFromDeletedItems}
            done={addItem}
            edit={editItem}
            type="checked"
          />
        ))}
      </div>
    </div>;
    }
  }

The code above can be used to conditionally render the function display() in the return() block of the React component.

Just make a simple JSX function call inside the return section of the return like this:

{display(searchValue)}

That's it. The useEffect() hook will automatically throw a call to React dom to re-render the component.