Scribd
Upload
12 views

Challenge Solution

React Challenge

Uploaded by

TEJASHREE S V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Challenge Solution

React Challenge

Uploaded by

TEJASHREE S V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Challenge Day Solution

01 Building & Using a Component

02 Can You Spot the Mistake?

03 Can You Create a Product Catalog?


Challenge 01

Building & Using a Component

In this challenge, you'll enhance the modularity and reusability of a


React application by creating a separate header component. Your task
is to design and implement a 'Header' component that features an
image of D.J. De Pree, a key figure in the history of Herman Miller.
Once the header component is created, integrate it into the main App
component. Additionally, nest a 'Content' component within the App
component to complete the application layout.

Learning Objective
Create a basic React component and use it in the JSX code of another
component.
Solution

STEP 1: Create a separate Header component implementing a


Heading-1 as "Humble Beginning" and a image of D.J. De Pree
using React functional component syntax.

It's a best practice to import the image using the import


statement rather than directly referencing the path in the <img>
src attribute because it allows for better static asset management
and ensures that the image is bundled with the rest of the
application's assets during the build process.
We use a React fragment (<>...</>) to wrap multiple elements
without introducing an additional DOM element.

STEP 2: Nest the header component within the main App


component, preserving the separation of concerns.Integrate the
existing 'Content' component into the App component to organize
and display the content of the application effectively.
Output:
Challenge 02

Can You Spot the Mistake?

The LightSwitch component is designed to dynamically switch the


background color of a page between white and black when the button
is clicked. However, due to a small oversight, clicking the button fails
to trigger any change in the background color. Your task is to step in
and fix the event handler so that clicking the button successfully
toggles the background color as intended.

Learning Objective

Learn to troubleshoot and fix event handler issues in React components


to enable dynamic functionality
Solution

The problem is that <button onClick={handleClick()}> calls the


handleClick function while rendering instead of passing it.
Removing the () call so that it’s <button onClick={handleClick}> fixes
the issue:

onClick={handleClick}
You defined the handleClick function and then passed it as a
prop to <button>. handleClick is an event handler.
Event handler functions:
a. Are usually defined inside your components.
b. Have names that start with handle, followed by the name of
the event.
Functions passed to event handlers must be passed, not
called.

Eg 1. Passing a function (correct): <button onClick={handleClick}>


Eg 2. Calling a function (incorrect): <button onClick=
{handleClick()}>

The difference is subtle. In the first example, the handleClick


function is passed as an onClick event handler. This tells React to
remember it and only call your function when the user clicks the
button.

In the second example, the () at the end of handleClick() fires the


function immediately during rendering, without any clicks. This is
because JavaScript inside the JSX { and } executes right away.

Note:

The best practice is to use <button onClick={handleClick}>


rather than <button onClick={() => handleClick()}>

You can use the {() => handleClick()} approach when you need to
pass arguments to the event handler or when you need to
perform some additional logic before calling the handler.
Output:
Challenge 03

Can You Create a Product Catalog?

Complete the implementation of a simple product catalog in React,


where each product item displays an image, name, and an "Add to
Cart" button. The number of items added to the cart should be
dynamically updated and displayed alongside each product.

Learning Objective

Gain a fundamental understanding of essential concepts of React such


as components, JSX, props, managing state within components, and
event handle event outputting dynamic content.
Solution
The Product component is responsible for rendering a single product
item within the product catalog which renders the product's image
and name using the props passed to the component.

Button displaying an "Add to Cart" invokes the handleAddToCart


function on click which updates the count state by incrementing it
when the "Add to Cart" button is clicked.

We use the useState hook to manage the state of the number of


items added to the cart (count).
The count state represents the number of items added to the
cart, and setCount is a function used to update this state. We
initialize count to 0, indicating that initially, no items have been
added to the cart.
When passing props to a component, it's a best practice to use
object destructuring to extract specific properties from the
props object. ({ name, image })
A straightforward way to render the product catalog is to have
Multiple instances of the “Product” component, passing the
required name and image props to each component.

But there exist the best practice solution by defining an array


‘chairs’ or ’products’. Each item in this array is an object
containing properties for the name and image of a product.

Next, we use the map function to iterate over the chairs array
which can helps us go through each chair in the list.

As the loop iterates over each chair in our list, it creates a


"Product" component for that chair, passing the chair's name and
image as props to the component.
Output

You might also like