const App = () => {
const [items] = React.useState([
{ boxId: 0, id: 0, status: 'show' },
{ boxId: 0, id: 1, status: 'show' },
{ boxId: 1, id: 2, status: 'hue-moe' }
]);
const [boxes] = React.useState([
{ id: 0 },
{ id: 1 }
]);
return (
<div className="grid">
{boxes.map(({ id }) =>
<ul className="box" key={id}>
{items.filter(({ boxId }) => boxId === id)
.map(({ id, status }) => <li key={id}>{status} {id}</li>)}
</ul>)}
</div>
);
}
let abuse = ['блин', 'черт'];
let inp = document.querySelector('#text');
let out = document.querySelector('#textOut');
inp.addEventListener ('blur', () => {
let words = inp.value.split(' ');
words.forEach(element => {
if(!(abuse.indexOf(element) == -1)) {
element = '***';
}
});
out.innerHTML = words.join(' ');
inp.value = '';
})