Consider the following code:
/* eslint-disable array-callback-return */
/* eslint-disable no-unused-expressions */
import React from 'react'
import './App.css';
let swear = [
'arse',
'ass',
'asshole',
'bastard',
'bitch',
'bollocks',
'bugger',
'bullshit',
'crap',
'damn',
'frigger',
]
const App = () => {
let [count , setCount] = React.useState(0)
let [approval , setApproval] = React.useState(false)
let [text , setText] = React.useState('')
const bogusCheck = (text) =>{
swear.map(word => {
text.includes(word) === true ? (console.log('Bad word found') ): (console.log('No bad word found'));
})
}
return (
<div className="App">
<h1>Profanity Checker</h1>
<p>Enter a sentence below and click the button below:</p>
<textarea cols="30" rows='10' value={text} onChange={e => setText(e.target.value) } />
<br />
<button onClick={() => bogusCheck(text)} >Profanity Check</button>
</div>
);
}
export default App;
This is supposed to be a profanity filter. The theory is that it takes input from the text area and then uses the .map() and .includes() function to compare.
swear is an array it includes some bad word.
So the map loops over the swear array, picks up each word and see if it is included in the text. If returns true it console logs (Bad word found). If not it logs(No bad word found)
The issue is that when I click the button, it logs 13 times the not required result and then logs once the required result followed by more non required result. See the image below.
What is the turnabout solution for this??
858235 503902Deference to op , some superb selective data . 446374
186750 230929I see something genuinely particular in this site . 113069
91630 159589Normally I try and get my mix of Vitamin E from pills. Even though Id genuinely like to via a fantastic meal strategy it can be rather hard to at times. 142923
174730 120912Hey! Do you use Twitter? Id like to follow you if that would be ok. Im surely enjoying your blog and appear forward to new updates. 160273