Question 184469 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Using Context with an Object of Arrays using React

I am working on using context in react applications. I am not sure how to describe what follows, but I am thinking maybe it is an object of arrays. My question is how I extract the title which contains the word, ‘hat’. This is just one item. Otherwise, it would contain more of these items that I would also extract. What I tried is: categoriesMap[0] and the like. Nothing worked. Thanks, Joshua.

categoriesMap[category] = 
    
  [
    {
        title: 'hats',
        items: [
            {
                id: 1,
                name: 'Brown Brim',
                imageUrl: 'https://i.ibb.co/ZYW3VTp/brown-brim.png',
                price: 25,
            },
            {
                id: 2,
                name: 'Blue Beanie',
                imageUrl: 'https://i.ibb.co/ypkgK0X/blue-beanie.png',
                price: 18,
            },
            {
                id: 3,
                name: 'Brown Cowboy',
                imageUrl: 'https://i.ibb.co/QdJwgmp/brown-cowboy.png',
                price: 35,
            },
            {
                id: 4,
                name: 'Grey Brim',
                imageUrl: 'https://i.ibb.co/RjBLWxB/grey-brim.png',
                price: 25,
            },
            {
                id: 5,
                name: 'Green Beanie',
                imageUrl: 'https://i.ibb.co/YTjW3vF/green-beanie.png',
                price: 18,
            },
            {
                id: 6,
                name: 'Palm Tree Cap',
                imageUrl: 'https://i.ibb.co/rKBDvJX/palm-tree-cap.png',
                price: 14,
            },
            {
                id: 7,
                name: 'Red Beanie',
                imageUrl: 'https://i.ibb.co/bLB646Z/red-beanie.png',
                price: 18,
            },
            {
                id: 8,
                name: 'Wolf Cap',
                imageUrl: 'https://i.ibb.co/1f2nWMM/wolf-cap.png',
                price: 14,
            },
            {
                id: 9,
                name: 'Blue Snapback',
                imageUrl: 'https://i.ibb.co/X2VJP2W/blue-snapback.png',
                price: 16,
            },
        ],
    },
  ];
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ah, I can't get the find to work, I get: categoriesMap.find is not a function. Perhaps because it is not a simple array? Would you continue to help me, please? Here is the code:

    const Category = ({}) => {

   // log.console("cat", {category});
   
  let { category } = useParams();
  
    //console.log("ca: ",category);  
  //category = "hats";
  const { categoriesMap } = useContext(CategoriesContext);
  const [products, setProducts] = useState(categoriesMap[category]);
   
  console.log("category :", categoriesMap.title);


    const searchTerm = "hats";
    const categoriesMapWithHat = categoriesMap.find(category => category.title.includes(searchTerm));
    const title = categoriesMapWithHat.title;
    alert("title: ", title);


  2. 0

    To extract the title that contains the word ‘hat’ from the categoriesMap, you can use the filter and find array methods. Here’s an example of how you can achieve that:

    const searchTerm = 'hat';

// Filter the categories to find the one that contains the word 'hat'
const categoryWithHat = categoriesMap.find(category => category.title.includes(searchTerm));

if (categoryWithHat) {
  const title = categoryWithHat.title;
  console.log(title); // Output: 'hats'

  // Access the items within the category
  const items = categoryWithHat.items;
  console.log(items); // Output: Array of items
} else {
  console.log('No category found with the word "hat"');
}

    In this code, the find method is used to filter the categoriesMap array and find the category that has the title containing the word ‘hat’. If a matching category is found, its title and items can be accessed. Otherwise, if no matching category is found, an appropriate message can be displayed.

    Remember to replace categoriesMap with the actual variable name you’re using in your code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search