JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="letters"></h1>
<button id="generate">Générer</button>

CSS

button {
  text-transform: uppercase;
}

JavaScript

var letters = [
	'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o',
  'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
];
var tab = [];
function randomLetter()
{
	if (tab.length === 8) {
  	document.querySelector('#letters').innerText = tab.join('');
  } else {
    var index = Math.floor(Math.random() * letters.length);
    let random = letters[index];
    if (!tab.includes(random)) {
    	tab.push(random);
    }
    randomLetter();
  }
}
document.querySelector('#generate').addEventListener('click', () => {
	if (tab.length) {
  	tab = [];
  }
  randomLetter();
});