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

|

14 Discussions

|

  • work_soumyas
     + 0 comments
    import React from "react";

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

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

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

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

  const getProcessedText = () => {
    let outputText = inputText
    if (omitWords) {
      let words = inputText.split(" ")
      outputText = words.filter((word) => !OMITTED_WORDS.includes(word)).join(" ")
    }
    return outputText
  }

  return (
    <div className="omitter-wrapper">
      <textarea
        placeholder="Type here..."
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        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 };

  • jarrod8
     + 0 comments

    My code fails all three tests, but I can carry out the tests manually and it works just fine. Maybe I broke it with my suboptimal solution :D

    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) return inputText
    let wordArray = inputText.split(' ');
    let newArray = wordArray.reduce((acc, word) => {
      if (!OMITTED_WORDS.includes(word.toLowerCase())) {
        acc.push(word + ' ');
      } 
      return acc
    },[])
    return newArray;
  };

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

  • tuongthanh98
     + 0 comments
    const getProcessedText = () => {
  if (!omitWords) return inputText;

  // return inputText.split(" ").filter(char => !OMITTED_WORDS.includes(char)).join(" ");

  // Using regex
  let regex = new RegExp('\\b(' + OMITTED_WORDS.join('|') + ')\\b', 'g');
  return inputText.replace(regex, "").replace(/\s+/g, ' ');
};

  • somplang
     + 0 comments

    You can use this "getProcessedText" code for a shorter version

    const getProcessedText = () => {
    let omit = (inputText+" ").replace(/(a|the|and|or|but)\s+/g, "").trim();
    return omitWords ? omit : inputText;
  };

  • nfcompanion
     + 0 comments

    Easiest challange in this category. Why is it marked as hard?

    import React from "react";

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

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

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

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

  const getProcessedText = () => {
    let outputText = inputText
    if (omitWords) {
      let words = inputText.split(" ")
      outputText = words.filter((word) => !OMITTED_WORDS.includes(word)).join(" ")
    }
    return outputText
  }

  return (
    <div className="omitter-wrapper">
      <textarea
        placeholder="Type here..."
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        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 };