Code Monkey home page Code Monkey logo

react-hooks-forms-lab's Introduction

React Controlled Components Lab

Overview

In this lab, you'll write and use controlled components, and write validation for form components.

Controlled Components

Now that we know how to handle form elements in React and how to set up controlled components, it's time to put that knowledge to the test. This lab is fairly extensive, but you'll use many core React concepts here that will surface again and again. Time to get some practice in!

We'll continue adding new features to the Shopping List app using controlled components. Make sure to familiarize yourself with the code before diving into the deliverables! Completing these deliverables will also require understanding of all the previous topics from this section, including initializing state, passing data and callback functions as props, and working with events.

Deliverables

Filter

In the filter component, there is a new input field for searching our list. When the user types in this field, the list of items should be filtered so that only items whose name matches the text are included.

  1. Determine where you need to add state for this feature. What components need to know about the search text?

  2. Once you've determined which component should hold the state for this feature, set up your initial state, and connect that state to the input field. Remember, we're trying to make this input a controlled input -- so the input's value should always be in sync with state.

  3. After you've connected the input to state, you'll also need to find a way to set state when the input changes. To get the test passing, you'll need to use a prop called onSearchChange as a callback.

  4. Finally, after making those changes, you'll need to use that state value to determine which items are being displayed on the page, similar to how the category dropdown works.

Note: you may be asking yourself, why are we making this input controlled when the <select> element is not a controlled input? Well, the <select> input should probably be controlled as well! The tests don't require it, but feel free to update the <select> element to be a controlled.

ItemForm

There is a new component called ItemForm that will allow us to add new items to our shopping list. When the form is submitted, a new item should be created and added to our list of items.

  1. Make all the input fields for this form controlled inputs, so that you can access all the form data via state. When setting the initial state for the <select> tag, use an initial value of "Produce" (since that's the first option in the list).

  2. Handle the form's submit event, and use the data that you have saved in state to create a new item object with the following properties:

    const newItem = {
      id: uuid(), // the `uuid` library can be used to generate a unique id
      name: itemName,
      category: itemCategory,
    };
  3. Add the new item to the list by updating state. To get the test passing, you'll need to use a prop called onItemFormSubmit as a callback.

    NOTE: to add a new element to an array in state, it's a good idea to use the spread operator:

    function addElement(element) {
      setArray([...array, element]);
    }

    The spread operator allows us to copy all the old values of an array into a new array, and then add new elements as well. When you're working with state you never want to mutate state by using methods like .push -- always use non-destructive array methods when working with state!

Resources

react-hooks-forms-lab's People

Contributors

lukeghenco avatar maxwellbenton avatar realandrewcohn avatar lizbur10 avatar ihollander avatar dependabot[bot] avatar thomastuts avatar aspenjames avatar gj avatar annjohn avatar arye-eidelman avatar pletcher avatar dakotalmartinez avatar john-franti avatar kreopelle avatar kjleitz avatar melswell avatar teasacura avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.