This Hangman game in react jsx. please complete the tasks, go down and then you will see the TASK..Some of the tasks I completed, you will see in the code but some of Task I didn't. Please help me to fill up the Tasks

When we complete the task this would be the final look of the game

react jsx:

import { useState } from 'react'

import reactLogo from './assets/react.svg'

import './App.css'

function Header(){

return(

Hangman Game!!

---

)

}

function Footer(){

return(

---

© Worked by AFSANA

)

}

let newGuessedWord = [];

let wordList = [

"Aardvark",

"Albatross",

"Alligator",

"Chimpanzee",

"Chinchilla",

"Chough",

"Clam",

"Cobra",

"Cockroach",

"Cod",

"Cormorant",

"Coyote",

"Crab",

"Crane",

"Crocodile",

"Crow",

"Curlew",

"Deer",

"Dinosaur",

"Dog",

"Dogfish",

"Dolphin",

"Dotterel",

"Dove",

"Dragonfly",

"Duck",

"Dugong",

"Dunlin",

"Eagle",

"Echidna",

"Eel",

"Eland",

"Elephant",

"Elk",

"Emu",

"Falcon",

"Ferret",

"Finch",

"Fish",

"Flamingo",

"Fly",

"Fox",

"Frog",

"Gaur",

"Gazelle",

"Gerbil",

"Giraffe",

"Gnat",

"Gnu",

"Goat",

"Goldfinch",

"Goldfish",

"Goose",

"Gorilla",

"Goshawk",

"Grasshopper",

"Grouse",

"Guanaco",

"Gull",

"Hamster",

"Hare",

"Hawk",

"Hedgehog",

"Heron",

"Herring",

"Hippopotamus",

"Hornet",

"Horse",

"Human",

"Hummingbird",

"Hyena",

"Ibex",

"Ibis",

"Jackal",

"Jaguar",

"Jay",

"Jellyfish",

"Kangaroo",

"Kingfisher",

"Koala",

"Kookabura",

"Kouprey",

"Kudu",

"Lapwing",

"Lark",

"Lemur",

"Leopard",

"Lion",

"Llama",

"Lobster",

"Locust",

"Loris",

"Louse",

"Lyrebird",

"Magpie",

"Mallard",

"Manatee",

"Mandrill",

"Mantis",

"Marten",

"Meerkat",

"Mink",

"Mole",

"Mongoose",

"Monkey",

"Moose",

"Mosquito",

"Mouse",

"Mule",

"Narwhal",

"Newt",

"Nightingale",

"Octopus",

"Okapi",

"Opossum",

"Oryx",

"Ostrich",

"Otter",

"Owl",

"Oyster",

"Panther",

"Parrot",

"Partridge",

"Peafowl",

"Pelican",

"Penguin",

"Pheasant",

"Pig",

"Pigeon",

"Pony",

"Porcupine",

"Porpoise",

"Quail",

"Quelea",

"Quetzal",

"Rabbit",

"Raccoon",

"Rail",

"Ram",

"Rat",

"Raven",

"Red deer",

"Red panda",

"Reindeer",

"Rhinoceros",

"Rook",

];

function randomSecretWord() {

return wordList.map(v=>v.toLocaleLowerCase())[Math.floor(Math.random() * wordList.length)];

}

const App = () => {

const [secretWord, setSecretWord] = useState(randomSecretWord());

//guessedWord is used for displaying the word guessed so far

const [guessedWord, setGuessedWord] = useState(new Array(secretWord.length).fill('-'));

//TASK: set a correct initial value for wrongCount

const [wrongCount, setWrongCount] = useState();

const [message, setMessage] = useState('');

let guessedLetter = '';

function resetGame() {

setTimeout(() => {

let newSecretWord = randomSecretWord();

//TASK: set new secretWord, reset guessedWord, count and message here!

setSecretWord(newSecretWord);

setGuessedWord(new Array(newSecretWord.length).fill('-'));

setWrongCount(0);

setMessage('');

}, 2000);

}

const handleClick = (event) => {

//TASK: assign correct value to the guessedLetter

//This should come from event.target.??

guessedLetter = '';

newGuessedWord = [...guessedWord]; //shallow copy of array

//check if the letter clicked is in the secretWord

if (secretWord.includes(guessedLetter)) {

//formulate new guessedWord to display

//fill - with the correct guessed letter

for (let i = 0 ; i < secretWord.length; i++){

if (secretWord[i] == guessedLetter){

newGuessedWord[i] = guessedLetter;

}

}

//TASK: set the new guessedWord to display here!

setGuessedWord(newGuessedWord);

//Check if the newGuessedWord is the same as the secretWord

if (newGuessedWord.join('') == secretWord){

//TASK: set message state that you have won and resetGame here!

setMessage('YOU HAVE WON!!!');

resetGame();

}

} else {

setWrongCount(wrongCount+1);

//TASK: Check if the letter is guessed incorrectly 6 times

if (wrongCount > 0) {

//TASK: set message state that you have lost

//show the correct word and resetGame here

setMessage(`YOU HAVE LOST!!! The correct word is ` + secretWord);

resetGame();

}

}

}

return(

{/* TASK: pass wrongCount and message as props here */}

)

}

const GuessedWord =(props) => {

return (

//TASK: complete this statement to show each letter in guessedWord passed from props

props.guessedWord.map(()=> {

return (

??

)

})

)

}

const Alert = ()=> {

//TASK: complete Alert Component here with props

return (

Wrong : XX

The message goes here!

)

}

const Keyboard = (props) => {

const buttons = "abcdefghijklmnopqrstuvwxyz".split('');

//TASK: complete the rendering of the keyboard here!

return (

{buttons.map((letter)=>{

return (

)

})}

)

}

export default App