What is the best way to transfer an integer from my main application to a separate JavaScript file?

Currently, I am developing a complex code using React Bootstrap and focusing on creating a Dropdown list that fetches data from the backend database.

<Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic"></Dropdown.Toggle>
  <Dropdown.Menu>
    <DDL options={parts} cid={7}></DDL>
  </Dropdown.Menu>
</Dropdown>

I resolved the issue by using DDL.js to properly map the Array obtained from the database and display it within the dropdown menu.

const DDL = ({ options }, cid) => {
  console.log(cid);
  const filtered = options.filter((option) => option.catID === cid);
  console.log(filtered);
  return filtered.map((option) => (
    <Dropdown.Item key={option.id} value={option.nev}>
      {option.nev}
    </Dropdown.Item>
  ));
};

export default DDL;

While the array portion of the code is functioning correctly, I am encountering difficulties in loading the Category ID necessary for my filter. Despite trying various methods, the value keeps being undefined. The approach shown above represents my latest attempt.

javascriptarraysreactjsundefinedreact-bootstrap

Answer №1

Make sure to properly destructure props by putting cid inside curly braces.

 const CustomDropdown = ({ options, cid }) => {
 console.log(cid);
 const filteredOptions = options.filter((option) => option.catID === cid);
 console.log(filteredOptions);
 return filteredOptions.map((option) => (
    <Dropdown.Item key={option.id} value={option.name}>
      {option.name}
    </Dropdown.Item>
 ));
};

export default CustomDropdown;

Answer №3

function filterDropdownOptionsByCatID({ options, catID }) {
  console.log(catID);
  const filteredOptions = options.filter((option) => option.catID === catID);
  console.log(filteredOptions);
  return filteredOptions.map((option) => (
    <Dropdown.Item key={option.id} value={option.name}>
      {option.name}
    </Dropdown.Item>
  ));
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to verify the login status of a user in NextJS

Currently, I'm utilizing Codeigniter 4 for the backend and have successfully implemented the login page. However, I've hit a roadblock in determining how to verify if the user is logged in or not using Next JS for the frontend. My initial thought ...

reactjsreact-hooksnext.jsuse-statereact-props

Fade or animate the opacity in jQuery to change the display type to something other than block

I am currently using display: table and display: table-cell to vertically align multiple divs. However, I have encountered an issue when animating the opacity with jQuery using either fadeTo() or fadeIn. The problem is that it always adds inline style di ...

javascriptjqueryhtmlcss

Different ways to conditionally set the expanded prop for the Material UI TreeView component

I am currently working on implementing a tree select feature similar to the one found in antd's tree-select using material ui components. Specifically, I have a TextField and TreeView components from Material-UI stacked vertically. Initially, I want t ...

javascriptreactjstreeviewmaterial-uiantd

Various settings in JQuery UI Slider

Does anyone know how to customize the steps in a jQuery UI slider? I want to set specific values as steps, like 0, 1200, 2000, 2200, and 3000. Any suggestions on how to achieve this? const rangeSliderInit = () => { const valueArray = [0, 400, 1000, 1 ...

javascriptjquerycssslider

Button-triggered MUI autocomplete feature

I am currently working on an application that requires a selection menu to appear when a button is clicked. Here's a snippet of what I have in mind: import React from "react"; import AutoComplete from "@mui/material/Autocomplete"; ...

reactjsmaterial-ui

Emulate a Click Using Pure JavaScript

I am looking to add a click event to my custom dropdown, which replaces a SELECT element. The purpose of this click event is to trigger the corresponding OPTION item when an LI element is clicked. It seems like Woocommerce uses some JavaScript or PHP func ...

javascriptwordpresswoocommerce

Display the keys of a nested array in Vue.js when the structure is unknown

Here is a representation of a dynamic array I have: nodes: [ { n1: "Foods", }, { n4: "Drinks", b7: [ { a2: "Beers", a4: [ ...

javascriptvue.js

In AngularJS, the execution of a subsequent AJAX call is reliant on the response of a preceding AJAX

Initially, I invoked the userSignupSubmit function. Within this method, another method called mobilenocheckingmethod is called. This method depends on the response from an AJAX call to make another AJAX call, but unfortunately, the second call does not w ...

javascriptajaxangularjsangularjs-http

underscore.js does not allow data to be manipulated outside of the _.each

Struggling to get my head around utilizing the underscore loop in jQuery's $.ajax function for retrieving a JSONp file... Within the success section, I have the following code snippet: success : function(response) { var dataResp = '' ...

javascriptjqueryajaxunderscore.jsunderscore.js-templating

Clicking on a href link inside a scrollable div-container causes it to malfunction, causing the page to jump

I have a draggable div container that contains dynamically generated content. In order to display this container, I use the following code: $( function() { $( "#dialog-message" ).dialog({ modal: true, height: 400, buttons: { Fertig: functi ...

javascriptjqueryhtmlgoogle-chromefirefox

Eliminating unnecessary CSS from the codebase of a website

Currently, I am making adjustments to a website template that I downloaded for free online. I have noticed that even if I delete a div from the code, the corresponding CSS styles remain in one or more files. Is there any tool available that can automatic ...

phpjavascriptjqueryhtmlcss

What is the quickest method to perform a comprehensive comparison of arrays and combine distinct objects?

I am currently working with NextJS and Zustand and I have a state in Zustand that consists of an array of objects: [{a:1, b:2}, {a:2, b:3}] Additionally, there is another incoming array of objects that contains some of the existing objects as well as new ...

javascriptreactjsnext.jszustand

Numerous mistakes detected in the TypeScript code

I've implemented the following class within an ASP.NET Core React application: import * as React from 'react'; interface MyInputProps { inputType: string; id: string; className: string; parentFunctio ...

reactjstypescript

When I run `npm start`, there is no response and I keep getting a "connection

After attempting multiple tutorials, I am facing the same issue where 'npm start' does not execute anything and there are no error messages. Additionally, when I try to open localhost:3000, the connection is refused. Interestingly, switching to ...

node.jsreactjsnpm

Enhance your browsing experience with a JavaScript bookmarklet that allows you to easily search through

Struggling to develop a JS Bookmarklet that scans the source code of the current page for a specific code like "G1_Value_client." If found, I need it to trigger alert A; if not found, trigger alert B. Seeking assistance as I am facing some challenges with ...

javascriptjqueryscriptingbookmarklet

Exploring TypeScript: Optional Sub-Properties

I've been exploring ways to create a type-alias with properties like "answer" that I came across in this post by another user (Typescript interface optional properties depending on other property). Here's an example: type Sample = { key1: true, ...

javascripttypescript

Exclude the CSS file from all elements except for the ones that are being appended to a specific div

Imagine you have a document with a CSS file that applies to all elements on the page. Is there a way to selectively remove or add styles from this file so they only affect a specific div and not the entire document? ...

javascriptjquerycss

Resetting the selected value in an Angular2 select element after the user makes a change

I have a dropdown menu which the user can select an option from. Initially it has a default value and when the user makes a new selection, I need to ask for confirmation by showing a message "are you sure?". If the answer is NO, then I should revert back t ...

javascriptangularjsangular

What is the process of transforming a basic JavaScript function into a TypeScript function?

As a Java developer diving into TypeScript for frontend development, I've encountered a simple JavaScript code snippet that I'd like to convert to TypeScript. The original JavaScript code is: let numbers = [123, 234, 345, 456, 567]; let names = ...

javascripttypescriptfunction

Organizing multiple <image> tags into an array with Javascript - a beginner's guide!

My HTML file contains multiple images. When a user clicks on them, their IDs should be captured without any issues. I am looking for help with the following tasks: 1) Storing all clicked image IDs in an array For example: array = img01 ; array = img ...

javascriptjqueryarraysimage