¿Por qué el valor de categoryDictonary[item] no está definido cuando categoryDictonary["Marvel"] da ["WandaVision", "Loki", "Moon Knight"] incluso cuando el valor del artículo es "Marvel" ingrese la descripción de la imagen aquí
Aquí está mi código para el mismo
export default function App() { var categoryDictonary = { Marvel: ["WandaVision", "Loki", "Moon Knight"], SitComs: ["Brooklyn 99", "Big Bang Theory"]}; var categories = Object.keys(categoryDictonary); function ClickHandler(item) { console.log(item); console.log(categoryDictonary["Marvel"]); console.log(categoryDictonary[item]); } return ( <div className="App"> <h2>TV Show Ratings</h2> <h3>Check out my ratings on some of the most popular TV Shows</h3> <ul> {categories.map((item) => { return ( <li key={item} onClick={() => ClickHandler({ item })}> {item} </li> ); })} </ul> </div> ); }Su accesorio de item de ClickHandler(item) no es una string que puede obtener el valor de categoryDictionary , es un objeto con valor {item: "Marvel"} , por lo que debe hacer categoryDictionary[item.item] para obtener el resultado correcto .
Editar: dado que ahora publicó el código completo, ya está pasando el elemento de utilería a ClickHandler({ item }) como un objeto en onClick() puede capturar lo mismo en la función ClickHandler cambiando sus parámetros como function ClickHandler({ item }) entonces puedes hacer directamente categoryDictionary[item] .