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

|

22 Discussions

|

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

  • taggon
     + 0 comments

    The requirement contains a wrong description. It says "The WordOmitter component takes an array of words to omit as a prop called omitWords." but the component doesn't take any props. You need to use the constant OMITTED_WORDS instead.

  • mamdyaldeep
     + 1 comment

    anyone help me with what i am missing

    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 [ommitedWords, setOmmitedWords] = useState(''); const handleInputChange = (e) => { setInputText(e.target.value); OMITTED_WORDS.forEach((word) => { if (inputText.includes(word)) { const value = inputText.replace(word, ''); setOmmitedWords(value); } }); if (inputText === '') { setOmmitedWords(''); } };

    const toggleOmitWords = () => { if (omitWords) { setOmmitedWords(inputText); } else { OMITTED_WORDS.forEach((word) => { if (inputText.includes(word)) { const value = inputText.replace(word, ''); setOmmitedWords(value); } }); } setOmitWords(!omitWords); };

    const clearFields = () => { setInputText(''); setOmmitedWords(''); // TODO: Add your changes here };

    const getProcessedText = () => { // TODO: Add your changes here if (ommitedWords.length > 0) { return ommitedWords; } else { return ommitedWords; }; };

    return ( {omitWords ? "Show All Words" : "Omit Words"} Clear

    Output:

    {getProcessedText()}

    ); }

    export { WordOmitter };

  • r3mdh066
     + 0 comments

    The SASSA status check portal provides transparency about payment dates and bank processing information. This means you can see when your grant will be paid out, how much you are due to receive, and whether the payment is being processed Click here for SRD status update. This clear timeline helps with financial planning and reduces confusion or misinformation.