Why is the value of categoryDictonary[item] undefined when categoryDictonary["Marvel"] gives ["WandaVision", "Loki", "Moon Knight"] even when the value of item is "Marvel"enter image description here
Here is my code for the same
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>
);
}
Your item prop of ClickHandler(item) is not a string which can get the value from the categoryDictionary, it is an object with value {item: "Marvel"} so you have to do categoryDictionary[item.item] to get the correct output.
Edit: Since now you posted the full code, you are already passing the prop item to ClickHandler({ item }) as an object in onClick() you can catch the same in the ClickHandler function by changing its parameters as destructed object function ClickHandler({ item }) then you can directly do categoryDictionary[item].