Overview

This simple but interactive component checks whether a given string is a palindrome — a word or phrase that reads the same backward as forward (ignoring punctuation, spaces, and capitalization). What makes this project more than just a string reversal is how it's built using React, showcasing how dynamic behavior and conditional UI can be handled cleanly through state management and component logic.

At its core, this component demonstrates the power of controlled inputs in React. The user's input is stored in state using useState, and every interaction is handled through React’s declarative event system. Instead of directly accessing the DOM with document.getElementById, the app leverages React’s reactivity — the result text updates automatically based on state, without manual DOM manipulation. The reset button is a simple function resetting the state of the input, result, and the "isPalindrome" boolean.

The logic itself includes input validation, string preprocessing (using regex to remove non-alphanumeric characters), and comparison of the cleaned string to its reversed form. Results are conditionally rendered to the screen, with visual feedback indicating success or failure using dynamic classes powered by Tailwind CSS. React’s component lifecycle ensures that nothing renders unnecessarily, and that the interface responds in real time to user actions.