We use cookies to ensure you have the best browsing experience on our website. Please read our cookie policy for more information about how we use cookies.
  1. Prepare
  2. React
  3. Components
  4. Word Omitter
  5. Discussions

Word Omitter

  • mealeyst
     + 0 comments

    Okay, I am scratching my head here, I have the following solution, but the tests are failing (even though it appears like the tests SHOULD be passing. Is this because I was being too creative by leveraging Regex?

    import React, { useState } from "react";

const OMITTED_WORDS = ["a", "the", "and", "or", "but"];

function WordOmitter() {
  const [inputText, setInputText] = useState("");
  const [omitWords, setOmitWords] = useState(true);

  const handleInputChange = (e) => {
    setInputText(e.target.value);
  };

  const toggleOmitWords = () => {
    setOmitWords(!omitWords);
  };

  const clearFields = () => {
    setInputText("")
  };

  const getProcessedText = () => {
    if(omitWords){
      const regexPattern = "\\b(" + OMITTED_WORDS.join("|") + ")\\b";
      const regex = new RegExp(regexPattern, "gi");
      return inputText.replace(regex, "");
    }
    return inputText
  };

  return (
    <div className="omitter-wrapper">
      <textarea
        placeholder="Type here..."
        value={inputText}
        onChange={handleInputChange}
        data-testid="input-area"
      />
      <div>
        <button onClick={toggleOmitWords} data-testid="action-btn">
          {omitWords ? "Show All Words" : "Omit Words"}
        </button>
        <button onClick={clearFields} data-testid="clear-btn">
          Clear
        </button>
      </div>
      <div>
        <h2>Output:</h2>
        <p data-testid="output-text">{getProcessedText()}</p>
      </div>
    </div>
  );
}

export { WordOmitter };