Why does my key give an undefined value even if me passing the key to the object in the form of a string gives me the correct value

user_19195278 0
Viewed 23

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>
);
}
reactjs javascript
1 Answers

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].

user_191440160
Related