React - Level 5 - React Interactivity - Enhance Your Animal Gallery with State and Event Handling

[akash-coded]

Title: Enhance Your Animal Gallery with State and Event Handling!

---

Hello, React developers!

You've now learned about state in React, how to pass mutator functions through props, and how to handle click events. Let's put all that knowledge into practice by enhancing the Animal Gallery app (#253) you built earlier.

In this exercise, we'll add interactivity to your Animal Gallery by allowing users to "like" their favorite animals. You'll learn how to manage stateful data, pass mutator functions to child components, and handle events to update the UI.

---

🌟 Exercise Overview

Objective: Update your existing Animal Gallery app to allow users to like animals by clicking a button, and display the number of likes for each animal.

What You'll Learn:

• Managing state in React using the useState hook.
• Passing mutator functions through props to child components.
• Handling click events in React.
• Updating state immutably.
• Using JavaScript array methods like map().

---

🛠️ Let's Get Started!

Step 1: Set Up Your React App

If you completed the previous Animal Gallery exercise, you can use that code as your starting point. If not, you can create a new React app:

npx create-react-app animal-gallery
cd animal-gallery
npm start

---

Step 2: Prepare Your Data with Initial State

We'll modify App.js to manage the animals array using React state.

👉 Open src/App.js and update it as follows:

import React, { useState } from 'react';
import Gallery from './Gallery';

function App() {
  // Initialize state with an array of animal objects
  const [animals, setAnimals] = useState([
    {
      name: 'Lion',
      image: 'https://placekitten.com/300/200',
      likes: 0,
    },
    {
      name: 'Elephant',
      image: 'https://placekitten.com/301/200',
      likes: 0,
    },
    {
      name: 'Giraffe',
      image: 'https://placekitten.com/302/200',
      likes: 0,
    },
    // Add more animals as desired
  ]);

  return (
    <div className="App">
      <h1>Animal Gallery</h1>
      {/* Pass animals and setAnimals as props */}
      <Gallery animals={animals} setAnimals={setAnimals} />
    </div>
  );
}

export default App;

Concepts Used:

• State Management: Using useState to manage the animals array.
• Passing Props: Sending both data and mutator functions to child components.

---

Step 3: Update the Gallery Component

We'll update Gallery.js to receive and pass down the setAnimals function.

👉 Open src/Gallery.js and update it:

import React from 'react';
import AnimalCard from './AnimalCard';

function Gallery(props) {
  return (
    <div className="gallery">
      {props.animals.map(animal => (
        <AnimalCard
          key={animal.name}
          animal={animal}
          setAnimals={props.setAnimals}
        />
      ))}
    </div>
  );
}

export default Gallery;

Concepts Used:

• Props Destructuring: Accessing props directly.
• Passing Mutator Functions: Passing setAnimals to child components.

---

Step 4: Update the AnimalCard Component

We'll modify AnimalCard.js to display the number of likes and add a "Like" button.

👉 Open src/AnimalCard.js and update it:

import React from 'react';

function AnimalCard(props) {
  const { animal, setAnimals } = props;

  const handleLike = () => {
    // Update the number of likes for this animal
    setAnimals(prevAnimals =>
      prevAnimals.map(a =>
        a.name === animal.name ? { ...a, likes: a.likes + 1 } : a
      )
    );
  };

  return (
    <div className="animal-card">
      <h2>{animal.name}</h2>
      <img src={animal.image} alt={animal.name} />
      <p>Likes: {animal.likes}</p>
      <button onClick={handleLike}>Like</button>
    </div>
  );
}

export default AnimalCard;

Concepts Used:

• Event Handling: Handling the onClick event.
• State Update: Using setAnimals to update the state immutably.
• JavaScript ES6 Features: Using the spread operator (...).

---

Step 5: Understanding the handleLike Function

Let's break down the handleLike function:

const handleLike = () => {
  setAnimals(prevAnimals =>
    prevAnimals.map(a =>
      a.name === animal.name ? { ...a, likes: a.likes + 1 } : a
    )
  );
};

Explanation:

• setAnimals: Updates the state of animals.
• prevAnimals: Represents the previous state.
• map(): Iterates over each animal in the array.
• Condition a.name === animal.name: Finds the animal that was liked.
• { ...a, likes: a.likes + 1 }: Returns a new object with the updated likes.
• Immutability: We're creating a new array and new objects to avoid mutating the original state.

---

Step 6: Add a "Dislike" Button (Optional)

Let's enhance the app by adding a "Dislike" button.

👉 Update src/AnimalCard.js to include a "Dislike" button:

const handleDislike = () => {
  setAnimals(prevAnimals =>
    prevAnimals.map(a =>
      a.name === animal.name && a.likes > 0
        ? { ...a, likes: a.likes - 1 }
        : a
    )
  );
};

return (
  <div className="animal-card">
    {/* ...existing code... */}
    <button onClick={handleLike}>Like</button>
    <button onClick={handleDislike}>Dislike</button>
  </div>
);

Concepts Used:

• Conditional Logic: Ensuring likes don't go below zero.
• Event Handling: Adding another event handler.

---

Step 7: Add Sorting Functionality

Let's sort the animals based on the number of likes.

👉 Update src/Gallery.js to sort animals:

function Gallery(props) {
  // Sort animals by likes in descending order
  const sortedAnimals = [...props.animals].sort((a, b) => b.likes - a.likes);

  return (
    <div className="gallery">
      {sortedAnimals.map(animal => (
        <AnimalCard
          key={animal.name}
          animal={animal}
          setAnimals={props.setAnimals}
        />
      ))}
    </div>
  );
}

Concepts Used:

• Array Copying: Using the spread operator to copy the array before sorting.
• Array Sorting: Using sort() to order animals.

---

Step 8: Style Your App

Add some styles to make your app look better.

👉 Update src/App.css:

.App {
  text-align: center;
  padding: 20px;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.animal-card {
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  width: 200px;
}

.animal-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.animal-card button {
  margin: 5px;
  padding: 5px 10px;
}

---

Step 9: Run Your App

Save all your files and make sure your development server is running (npm start). Open your app in the browser and test the functionality:

• Click "Like" to increase the number of likes.
• Click "Dislike" to decrease the number of likes (not below zero).
• Observe that animals are sorted by likes in descending order.

---

🔄 Recap and Concepts

1. State Management with useState

• useState Hook: Allows you to add state to functional components.
• State Updates: Calling the state updater function (setAnimals) to change state.

2. Passing Mutator Functions Through Props

• Mutator Functions: Functions that change the state.

• Props: Passing both data and functions to child components.

• Example:

  <AnimalCard animal={animal} setAnimals={setAnimals} />

3. Handling Click Events

• Event Handlers: Functions that respond to user interactions.

• onClick Event: Triggers when a user clicks an element.

• Example:

  <button onClick={handleLike}>Like</button>

4. Updating State Immutably

• Immutability: Avoid modifying the original state directly.

• Creating New Objects/Arrays: Use the spread operator to create copies with updated values.

• Example:

  { ...a, likes: a.likes + 1 }

5. Using JavaScript Array Methods

• map(): Transforming arrays by applying a function to each element.

• sort(): Sorting arrays based on a comparison function.

• Example:

  prevAnimals.map(a => /* ... */)

---

🧩 Understanding the Code with Fill-in-the-Blanks

Let's revisit key parts of the code with blanks for you to fill in.

AnimalCard.js

const handleLike = () => {
  setAnimals(prevAnimals =>
    prevAnimals.map(a =>
      a.name === animal.name ? { _____ } : a
    )
  );
};

📝 Hint: Return a new object with the updated number of likes.

🔑 Solution:

{ ...a, likes: a.likes + 1 }

---

AnimalCard.js (Dislike Function)

const handleDislike = () => {
  setAnimals(prevAnimals =>
    prevAnimals.map(a =>
      a.name === animal.name && a.likes > 0
        ? { _____ }
        : a
    )
  );
};

📝 Hint: Decrease likes by 1, but only if likes are greater than zero.

🔑 Solution:

{ ...a, likes: a.likes - 1 }

---

Gallery.js (Sorting Animals)

const sortedAnimals = [_____].sort((a, b) => b.likes - a.likes);

📝 Hint: Copy the props.animals array before sorting.

🔑 Solution:

[...props.animals]

---

🌟 Extra Challenges

Challenge 1: Implement a "Favorite" Feature

Allow users to mark animals as favorites and filter the gallery to show only favorites.

Steps:

1. Add a "favorite" property to each animal in the state.
2. Create a button to toggle the favorite status.
3. Implement a filter to display only favorite animals.

Challenge 2: Add a Search Functionality

Allow users to search for animals by name.

Steps:

1. Add a search input in App.js.
2. Filter the animals based on the search query.
3. Pass the filtered animals to the Gallery component.

Challenge 3: Animate Likes

Add a visual effect when the number of likes changes.

Hint: Use CSS transitions or React animations.

---

🧠 Test Your Understanding

Try to answer these questions:

1. Why do we use prevAnimals in the setAnimals function?

   Answer: To access the current state of animals before updating it.

2. Why is it important to update state immutably in React?

   Answer: Because mutating state directly can lead to unexpected behavior and bugs, as React relies on immutability to detect changes.

3. How does the map() function help in updating state?

   Answer: It allows us to create a new array by transforming each element, which is essential for immutably updating state.

---

Understanding the Concepts

1. The useState Hook

• Syntax:

  const [state, setState] = useState(initialState);

• Purpose: Adds state to functional components.

2. Passing Functions Through Props

• Why: Allows child components to update state managed in a parent component.

• Example:

  <ChildComponent setState={setState} />

3. Handling Events in React

• Event Handler Functions: Functions that are called when an event occurs.

• Binding Events:

  <button onClick={handleClick}>Click Me</button>

4. Updating State Immutably

• Avoid Direct Mutation: Do not modify state variables directly.

• Create Copies: Use the spread operator or methods that return new arrays/objects.

  const newState = { ...state, property: newValue };

5. JavaScript Array Methods

• map(): Creates a new array by applying a function to each element.
• filter(): Creates a new array with elements that pass a test.
• sort(): Sorts elements in place based on a comparison function.

---

🚀 Keep Experimenting!

Don't stop here! Here are some ideas to further enhance your app:

• Add Comments: Allow users to add comments to each animal.
• Image Carousel: Implement a carousel to display multiple images for each animal.
• Responsive Design: Make sure your app looks good on all devices.
• Data Persistence: Save likes and favorites in local storage so they persist across sessions.

---

👩‍💻 Next Steps in React

Now that you're comfortable with state and event handling, consider exploring:

• Forms and User Input: Learn how to handle form submissions and user inputs.
• Lifecycle Methods and Effects: Use useEffect to handle side effects in your components.
• Context API: Manage global state without prop drilling.

---

Keep up the great work, and happy coding!

---

[AnsonTangCM]