0

I try to changing font color of text entered inside textarea. when user enter certain words inside the textarea then I would like to change the font color. I tried the below code, but can't get result.

export default function App() { 

 const [QueryText, setQueryText] = useState("");
 const matches = ["select", "where", "from"];    
 const handleonChange = ({ target }) => {
   const formattedWords = target.value.split(" ").map(function (word) {
      if (matches.indexOf(word) !== -1) {
           return '<span Style="color:blue">' + word + "</span>";
      } else {
        return word;
      }
    });
    setQueryText(formattedWords);
  }; 

  return (
    <div>      
      <textarea
          name="description"
          placeholder="Description"
          onChange={handleonChange}
        >{QueryText}</textarea> 
    </div>
  );
}

Any help is appreciated!

JsLearner
  • 446
  • 2
  • 7
  • 17

0 Answers0