 
  
   
  
  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 = '';
})