From the course: React for Web Designers
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Change options, see reactions - React.js Tutorial
From the course: React for Web Designers
Change options, see reactions
- Now we have all of our components in place. But if we make a selection, nothing changes. The list of five colors is the same, no matter what size I select. And if I change the color, the shoe doesn't change, the sizes don't change, nothing changes. So we need to make some changes to our code, so that these events that fire in the browser, actually make some updates on the page. We're going to do that for the first time in this video, wiring up this size selector to update the list of colors that are available in that size. So over here in my code, we need to wire something up to this select box. Specifically, we need to listen for the change event. And to do that on React, we set a prop called onChange. These are just like the inline event handlers that you see in regular HTML and JavaScript. In React, they just need to be in camel case. React has pretty much all the same event handlers that the DOM API offers with very, very rare exceptions. So if you can remember what it was…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
(Locked)
Installing React on an existing site8m 7s
-
(Locked)
Identifying your components and data3m 19s
-
(Locked)
Set up first simple component5m 31s
-
(Locked)
Start using JSX with the help of Babel7m 57s
-
(Locked)
Attaching a data source3m 20s
-
(Locked)
Create a new component with array data5m 56s
-
(Locked)
Implement props4m 28s
-
(Locked)
Implement state with the useState hook5m 11s
-
(Locked)
Add the color selector component3m 27s
-
(Locked)
Change options, see reactions6m 14s
-
(Locked)
Challenge: Activate the color selector1m 58s
-
(Locked)
Solution3m 4s
-
(Locked)
-
-
-