No description, website, or topics provided.
Clone or download
John Master
Latest commit 6930aa1 Nov 10, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information. Update exercise 4 instructions Nov 10, 2017

React Handling Events and Forms

Learning Objectives

  • Describe the concept and syntax of React components
  • Describe the concept and syntax of State and Lifecycle in React
  • Describe and implement the process of handling events in React
  • Use conditional rendering to respond to various states
  • Use map to produce a list of React elements and provide key props for efficiency
  • Make a form of controlled components

Doc Dive

Today we will be doing a series of doc dives and adding relevant features to our Fictional Restaurant Roulette App. We will start from where the lab left off. From the lab repo:

$ git checkout stage-five # NOTE: No -b! this checks out a remote branch locally
$ git checkout -b in-class # This gives us a new branch so commits on stage-five don't change

Components and Props

Doc Dive

  • How are components like functions?
  • What are the two ways we can define a component?
  • What is the syntax for using components in JSX? What case do we use in our component names?
  • What is meant by composing components?
  • Why do we want to extract components when possible?
  • What is meant by props are read only?


We will be pair programming on today's exercises. When pair programming, we want to work in a driver - navigator arangement where the person at the keyboard doesn't need to be thinking ahead but simply about the current step of the implimentation. The navigator meanwhile thinks about the big picture approach letting the driver worry about the technical details of the implementation. We will switch drivers and navigators at the next exercise.

Add a component to the React app called RestaurantForm. Define your componets as functions until you need a feature only available to classes. The RestaurantForm should be made of two components, one to chose whether to create a new restaurant or to edit an existing restaurant (the RestaurantSelector) and a form with fields for editing a restaurants attributes (the RestuarantEditor).

The component RestaurantSelector should be a select element with a list of options. We're eventually going to use the restaurant list with this but for now just hard code an option or two in.

Give RestaurantSelect a prop restaurants and make sure it works by hardcoding a value and logging it before rendering. But wait to use the list to create the options.

Give RestaurantEditor input fields for name, description, media, category, image, source, and media category, and a submit button.

If you have extra time, create a RestaurantForm.css file and style the RestaurantForm.

State and Lifecycle

Doc Dive

  • How does state differ from props? What kind of components do we need to use if we want state?
  • How do you convert a component defined by a function to a component defined by a class?
  • Where do we intialize a component's state? What else do we do here?
  • How do we read from state?
  • What is the lifecycle method that we use to set up a component? What is the lifecycle method we use to clean up after a component?
  • How do we update a component's state?
  • What are the "three things you should know about setState()"
  • What does "mergining is shallow" mean?
  • How do we pass state down to child components?


In App.js, pass the restaurant list into RestaurantForm as a prop. Change RestaurantForm to a component and initialize its state as {selectedRestaurant: {}}. Write a method selectRestaurantById that will update the selectedRestaurant based on an id passed to the method. This method should update selectedRestaurant to be the restaurant object from the restraunts list, not just the id. We have access to this list on Props. If the method gets called with no argument, it should set selectedRestaurant to an empty object.

You can add these two elements to your RestaurantForm to test selectRestaurantById:

<button onClick={() => this.selectRestaurantById(1)} />

Pass the selected restaurant to the RestaurantEditor as a prop.

Handling Events

Doc Dive

  • What are the syntactic differences between DOM event handling and React event handling?
  • What is a synthetic event (high level definition)? Where do we see synthetic events?
  • Why do we need to bind this on methods that will be event handlers and where do we do it?
  • What are two alternatives to binding this?
  • How do we pass extra arguments to an event handler?


Pass selectRestaurantById to RestaurantSelector as a prop. Add an onChange event handler to the select element of the RestaurantSelector that calls selectRestaurantById. For now pass it a hard coded value (something different than 1). You want to give each option of the select a value property. When the onChange handler is called, you can find the value selected with

Conditional Rendering

Doc Dive

  • What does it mean to conditionally render an element?
  • What mechanisms are available to us in JavaScript that allow us to conditionally render?
  • How do element variables let us render only part of a component conditionally?
  • How are the logical and (&&) and the ternary/if-else operator used to conditionally render?
  • What value should we render if we want a component not to render itself?


Add an option with the value of null to the restaurant selector. Add a header and button to the RestaurantEditor that render conditionally. The RestaurantForm should pass state.selectedRestaurant to the restaurantEditor. If the selectedRestaurant has an id property, the heading should read Editing Restaurant and the button should read Save Changes. If the selectedRestaurant doesn't have an id, the title should be New Restaurant and the button should be Create.

Set the value on each of the input fields to come from selectedRestaurant as well.

Lists and Keys

Doc Dive

  • What method do we use to apply a transformation to each element of an array and return a new array of the results of the transformation?
  • What is the purpose of the key property?
  • If we extract an component which is being created in a mapping, where does the key need to go?


Update the RestaurantSelector's options so they are produced from the restraunts prop. Make sure they each have a key. Add an option with a value of null for creating a new restaurant.


Doc Dive

  • What does "form elements naturally keep some internal state" mean?
  • What is a "controlled component"? Why does this make it simple to validate or modify user input?
  • What is different about React's textarea element than an HTML textarea?
  • How can giving inputs a name prop help create a generic input change handler?
  • BONUS: what is an uncontrolled component? How does this violate React's preference for declarative programming over impartive programming?


Define a gneric input change handler and make the form a controlled component. Add an event handler for submitting the form the logs the form's inputs from the App component. Depending on if the form sumbission is an edit or a create, PUT or POST to the API and get an updated list of restaurants.