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

Sort by

recency

|

25 Discussions

|

  • poonamdeorasurp1
     + 0 comments

    Here is tutorial about - Form validation using JQuery

  • abigailblake1002
     + 0 comments

    This kind of interactive filtering feature aligns well with modern front-end problem solving, something Bristol React Developers are likely familiar with, especially when working on real-time user interfaces.

  • 36_akashroy
     + 0 comments

    Here is the solution:

    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 = () => {
    inputText && setInputText("");
  };

  const getProcessedText = () => {
    const inputTextArr = inputText?.split(" ");
    const filteredInputText = inputTextArr?.filter(word => !OMITTED_WORDS.includes(word))

    if (omitWords) {
      return filteredInputText.join(" ");
    } else {
      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 };

  • 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 };

  • asmrahul17
     + 0 comments
    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){
      let omittedText = inputText.split(" ");
      omittedText = omittedText.filter((text) => {
        if (
          !(
            text === OMITTED_WORDS[0] ||
            text === OMITTED_WORDS[1] ||
            text === OMITTED_WORDS[2] ||
            text === OMITTED_WORDS[3] ||
            text === OMITTED_WORDS[4]
          )
        ) {
         
          return text
        }
     });
     return omittedText.join(" ")
    }else{
      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 };