Build a Simple React JS Interactive Web-Based Feedback Form with Emoji Reactions: A Beginner’s Guide

Written by

javascriptdebugged

in

In today’s digital landscape, gathering user feedback is crucial for understanding user needs, improving products, and fostering a strong community. Traditional feedback methods can often be cumbersome and lack engagement. Imagine a website where users can effortlessly express their opinions with a simple click, using expressive emoji reactions. This tutorial will guide you through building a dynamic, interactive feedback form in React JS that incorporates emoji reactions, making the feedback process more engaging and insightful. This project is perfect for beginners and intermediate developers looking to enhance their React skills and create user-friendly web applications.

Why Build an Emoji Reaction Feedback Form?

Emoji reactions provide a quick, intuitive way for users to share their feelings about content. They offer several advantages:

  • Increased Engagement: Emoji reactions are visually appealing and encourage immediate interaction.
  • Simplified Feedback: Users can express their opinions without typing lengthy comments.
  • Quick Insights: You can quickly gauge user sentiment by analyzing the distribution of emoji reactions.
  • Enhanced User Experience: The form feels modern and user-friendly.

This project will teach you key React concepts, including:

  • Component creation and composition
  • State management using `useState`
  • Handling user events (clicks)
  • Rendering dynamic content based on state

Project Setup

Before we begin, ensure you have Node.js and npm (or yarn) installed on your system. We will use `create-react-app` to scaffold our project. Open your terminal and run the following command:

npx create-react-app emoji-feedback-form
cd emoji-feedback-form

This command creates a new React application named “emoji-feedback-form”. Navigate into the project directory using `cd emoji-feedback-form`.

Project Structure and Files

Our project will have a straightforward structure:

  • src/: This directory will hold our React components and styles.
  • src/App.js: The main component, which will render the feedback form.
  • src/App.css: For styling our application.
  • src/components/FeedbackForm.js: This will be our custom component for the feedback form.
  • src/components/FeedbackForm.css: Styles specific to the FeedbackForm component.

Step-by-Step Implementation

1. Create the FeedbackForm Component

Inside the src/components/ directory, create a file named FeedbackForm.js. This component will contain the logic and UI for our feedback form.

// src/components/FeedbackForm.js
import React, { useState } from 'react';
import './FeedbackForm.css';

function FeedbackForm() {
  const [reactions, setReactions] = useState({
    '👍': 0,
    '❤️': 0,
    '😂': 0,
    '😡': 0,
  });

  const handleReactionClick = (emoji) => {
    setReactions(prevReactions => ({
      ...prevReactions,
      [emoji]: prevReactions[emoji] + 1,
    }));
  };

  return (
    <div className="feedback-form">
      <p>How was your experience?</p>
      <div className="emoji-container">
        {Object.keys(reactions).map(emoji => (
          <button key={emoji} onClick={() => handleReactionClick(emoji)} className="emoji-button">
            {emoji} {reactions[emoji] > 0 ? <span className="reaction-count">{reactions[emoji]}</span> : null}
          </button>
        ))}
      </div>
    </div>
  );
}

export default FeedbackForm;

Explanation:

  • We import the `useState` hook from React.
  • We define a `reactions` state variable using `useState`. This object stores the counts for each emoji. Initially, all counts are set to 0.
  • The `handleReactionClick` function updates the `reactions` state when an emoji button is clicked. It increments the count for the clicked emoji. The `…prevReactions` syntax is the spread operator, which creates a copy of the previous state to ensure immutability.
  • The JSX renders the feedback form. It displays the prompt and a container for the emoji buttons.
  • The `Object.keys(reactions).map()` method iterates through the emoji keys (the emojis themselves).
  • For each emoji, a button is rendered. The `onClick` prop calls `handleReactionClick` when the button is clicked.
  • The emoji and the corresponding count (if greater than 0) are displayed inside the button.

2. Style the FeedbackForm Component

Create a file named FeedbackForm.css in the src/components/ directory and add the following CSS styles:

/* src/components/FeedbackForm.css */
.feedback-form {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  margin: 20px;
  text-align: center;
  background-color: #f9f9f9;
}

.emoji-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.emoji-button {
  font-size: 24px;
  padding: 10px 15px;
  margin: 0 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.emoji-button:hover {
  background-color: #eee;
}

.reaction-count {
  margin-left: 5px;
  font-size: 14px;
  color: #777;
}

These styles provide basic visual styling for the feedback form and emoji buttons, making them more appealing.

3. Integrate the FeedbackForm into App.js

Modify src/App.js to import and render the FeedbackForm component.

// src/App.js
import React from 'react';
import FeedbackForm from './components/FeedbackForm';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Emoji Feedback Form</h1>
      </header>
      <FeedbackForm />
    </div>
  );
}

export default App;

Explanation:

  • We import the FeedbackForm component.
  • We render the FeedbackForm component within the main App component.

4. Style the App Component

Add some basic styling to src/App.css to improve the overall look.

/* src/App.css */
.App {
  text-align: center;
  font-family: sans-serif;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

5. Run the Application

In your terminal, navigate to the root directory of your project and run:

npm start

This will start the development server, and your application should open in your browser (usually at `http://localhost:3000`). You should see the feedback form with emoji buttons.

Common Mistakes and Solutions

1. Incorrect State Updates

One common mistake is directly modifying the state instead of using the state update function (`setReactions`). For example, don’t do this:

// Incorrect - DO NOT DO THIS
reactions[emoji] = reactions[emoji] + 1; // This won't trigger a re-render
setReactions(reactions); // This may not work as expected

Instead, always use the state update function to ensure React re-renders the component. Also, when updating state based on the previous state, it’s best practice to use a function in the `setReactions` call to prevent unexpected behavior due to stale closures. The correct way is demonstrated in the code above: `setReactions(prevReactions => ({ …prevReactions, [emoji]: prevReactions[emoji] + 1 }))`.

2. Forgetting to Import Components

Make sure you import all the necessary components correctly. A missing import will cause an error.

// Example: Missing import
// import FeedbackForm from './FeedbackForm'; // MISSING
function App() {
    return (
        <div>
            <FeedbackForm /> // This will cause an error if FeedbackForm isn't imported
        </div>
    );
}

3. Incorrect Event Handling

Ensure that you pass the event handler function correctly to the `onClick` prop. Do not include parentheses after the function name unless you are passing arguments to the function, for example: `onClick={handleReactionClick}`. If you use `onClick={handleReactionClick()}` the function will be executed immediately when the component renders, not when the button is clicked.

4. Immutability Issues

When updating the state, especially with objects and arrays, you must maintain immutability. This means you should not directly modify the original state object. Instead, create a new object (or array) with the updated values. The spread operator (`…`) is your friend here, as shown in the `handleReactionClick` function.

Enhancements and Extensions

This is a basic implementation. Here are some ideas to enhance this project:

  • Add More Emojis: Expand the emoji set to include more diverse reactions.
  • Store Reactions: Implement local storage or a backend API to save the reactions so they persist across sessions.
  • User Comments: Add a text input field for users to provide additional comments.
  • Dynamic Emoji Selection: Allow users to select emojis from a wider range, perhaps using a dropdown or emoji picker.
  • Real-time Updates: Use WebSockets or Server-Sent Events (SSE) to display reactions in real-time.
  • Accessibility: Ensure the form is accessible by adding ARIA attributes and keyboard navigation.

Summary / Key Takeaways

You’ve successfully built a simple, interactive feedback form with emoji reactions using React JS! You learned how to create a reusable component, manage state with `useState`, handle user events, and render dynamic content. This project is a great starting point for building more complex interactive web applications. Remember to always prioritize user experience, and consider how to make your applications more engaging and accessible. By understanding these fundamentals, you can build more interactive and user-friendly web applications. Experiment with the enhancements, explore the React documentation, and continue to practice to hone your skills.

FAQ

Q: How do I add more emojis?

A: Simply add more emoji keys to the `reactions` state object and include corresponding buttons in your JSX. Make sure to update the button’s `onClick` handler to correctly increment the count for the new emoji.

Q: How can I save the reactions so they don’t disappear when the page reloads?

A: You can use `localStorage` to store the `reactions` object in the user’s browser. When the component mounts (e.g., using `useEffect`), load the reactions from `localStorage`. When the reactions are updated, save them back to `localStorage`. For a more robust solution, consider using a backend database to store the feedback.

Q: How can I style the emoji buttons differently?

A: Modify the CSS styles in FeedbackForm.css. You can change the font size, padding, colors, and add hover effects to customize the appearance of the buttons. Consider using a CSS framework like Bootstrap or Tailwind CSS for more advanced styling options.

Q: How can I deploy this application?

A: You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide free hosting and make it easy to deploy your web applications. You’ll typically need to build your React app using `npm run build` and then deploy the contents of the `build` directory.

The journey of learning React is a rewarding one. Each project you undertake, no matter how small, adds to your understanding and proficiency. Embrace the process, experiment with new ideas, and never stop exploring the vast possibilities of web development. The ability to create engaging and user-friendly interfaces is a valuable skill in today’s digital world, and with practice, you’ll be well on your way to building impressive web applications that provide real value to users. Continue to practice and build, and you will see your skills improve exponentially.

More posts