Autocorrection Textarea - salimakhtar92/ReactJs GitHub Wiki

autocorrection.js

import {useState} from 'react';

const correctionObject = {
  realy: 'really',
  fynal: 'finally',
  ovre: 'over'
}
export default function App() {
  const [text, setText] = useState('');
  const onChangeHandler = event => {
    const { value } = event.target;
    let finalValue = value;
    if(value[value.length - 1] === ' ') {
      const wordArray = value.split(' ');
      const lastWord = wordArray[wordArray.length - 2];
      console.log(lastWord);
      const correctWord = correctionObject[lastWord];
      if(correctWord) {
        wordArray[wordArray.length - 2] = correctWord;
      }
      finalValue = wordArray.join(' ');
    }
    setText(finalValue);
  }

  return (
    <div className="App">
      <div className="text-center">
        <textarea value={text} data-testid="textarea" onChange={onChangeHandler} rows={10} cols={80} className="card" />
      </div>
    </div>
  );
}