Silent Bug on React JS Anime list

3 hours ago 1
ARTICLE AD BOX

can anyone help me fix a bug in my React JS code? When I add an anime name to the input column and click the “Add Anime” button, there is no change at all in the anime list. I can't find any errors in my browser console or VSCode terminal. Here are the details of my code:

import React, {useState} from 'react'; function AnimeList(){ const [anime, setAnime] = useState(["Attack on Titan", "Kimi No Wa", "Sakamoto Days"]) function handleAddAnime(){ const animeAdd = document.getElementById("animeInput").value; document.getElementById("animeInput").value = ""; setAnime([...anime, animeAdd]); } return( <div> <h2>Anime list</h2> <ul> {anime.map((anime, index) => <li key={index}>{anime}</li>)} </ul> <input type="text" placeholder='input anime name' id='animeInput' /> <button onChange={handleAddAnime}>Add Anime</button> </div> ) } export default AnimeList
Read Entire Article