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!