The code above adds an input and a check to see if the search string is included in any of the list items.

When using Parcel, you can choose how you want your project to be structured so I'm going to stick with the structure detailed below. To get started, I will be creating a project folder on my computer, then building out a file structure for my application. Creating the project folder and setting up a structure If you're new to the command line or need a refresher, I've written a blog post which explains most of the commands I will be using. I will be using the command line interface to get my project set up. Parcel has made several improvements since that post, so I will stick with that build tool for this post.

In my last post I used Parcel to bundle all of my packages together and build my code. In this post, I will follow roughly the same structure as the original. After taking a break from blogging to focus on my family and being swamped with work, I'm happy to report that this is that post! Since publishing the post, I've gotten several requests to rewrite the post showing how to build a search bar using React Hooks. When I wrote that article, React Hooks didn't exist so it is written using class components. useTodos curries useState output and generates a state manager which will be passed into TodoContext.Provider to be used as a global state.Let's build a search bar using React HooksĪ few years ago I wrote an article called Let's build a search bar in React where I showed readers (you guessed it!) how to build a search bar in React. And passed it into a custom hook called useTodos. With the composition of useState, useContext I created a global state. The main approach was to get rid off Redux and use React Contexts instead. Testable components (Uses Jest + Enzyme for tests)įor better approaches please open Pull Requests Summary 1.

Uses useReducer to manage state actions.This is a training repo to learn about new hooks feature of React and creating a testable environment. Trying to get rid off using Redux, make contexts more useful with useReducer and make components 'easy-to-test simple functions'.Ī highly decoupled, testable TodoList app that uses React hooks.

React todolist hooks