Determine the quantity of items currently in an active state

I created a function that toggles the active state of list items when clicked:

React

toggleActive: function(item){
  item.active = !item.active;
},

JSX

<li key={property.id} onClick={() => this.toggleActive(property)}>

Is there a way to count the number of items that are active later on? I would like to store this count in a variable.

I initially attempted something like this:

var count = this.properties.filter(item => item.active).length;

However, I am having trouble getting it to work as expected.

Answer №1

Implementing the ES6 Filter method on an array/object:

this.items.filter(item => item.active === true).length;

A more concise version would be:

this.items.filter(i => i.active).length

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

"Implementing Nested Actions in Vuex: A Guide on Calling Actions within Actions

I am currently working on a small Vue App with a Rails API where I am using Vue, Vue-Resource, and Vuex. I have successfully fetched all users from the database and now I am trying to update one of them. The patch operation for updating the user is working ...

Improved Approach for Replacing if/else Statements

I'm looking to streamline the controller used in my SQL command for filtering records based on specific criteria. The current approach below is functional, but not without its limitations. One major issue is scalability - adding more criteria in the f ...

The error message "TypeError: Cannot read property 'get' of undefined in mounted hook" is displayed when trying to access a property that is undefined

Currently, I am utilizing Jest for unit testing within Nuxt.js. Below is an example of my mounted hook: async mounted(){ try{ var response = await this.$axios.get("api_url here"); this.result = response.data; } catch(e){ console.log ...

You have encountered an error: [ERR_HTTP_HEADERS_SENT]. This means that you cannot set headers after they have already been sent to the client, even if a return

I've encountered a 'Cannot set headers after they are sent to the client' error with the /api/users/profile route and have been attempting to resolve it. I stumbled upon some solutions on stackoverflow suggesting to add a return statement - ...

A specialized identifier for nested objects in a React component

I am currently working with a JSON data structure that looks like this: [ [ { city: x patients: x id: 1 }, { city: y patients: y id: 2 } ], [ { city: x patients: x id: 1 }, { city: y patients: y id: 2 } ...

Identifying a specific string value in an array using jQuery or JavaScript

Currently, I am working on checking for duplicate values in an array that I have created. My approach involves using a second array called tempArray to compare each value from the original array (uniqueLabel) and determine if it already exists. If the val ...

Creating variables in styled-components allows you to easily reuse values throughout

Can a variable be defined inside a styled-components component? The code snippet below, although not functioning properly, demonstrates my intention: const Example = styled.div` ${const length = calc(vw - props.someValue)} width: ${length}; &. ...

What is the best method for initializing Bootstrap data attributes API?

I've been puzzled by this issue for a while now. When trying to use the JavaScript components, I can't seem to grasp how to utilize them using the Data Attributes API, also known as the first-class API. For example, take the modal component ment ...

Implementing Othello Minimax Algorithm in React.js Yields Unsuccessful Results

I need assistance with a recurring issue where the AI player consistently plays the first available move it encounters. My objective was to implement an AI using the Minimax Algorithm, but I'm facing challenges in achieving the desired functionality. ...

Dealing with multiple Datepicker components in React hooks

Managing a single instance of Datepicker in a React project is easy, but what about handling multiple instances? The date changes are not reflected on the UI even though they can be seen in the console. What are some efficient solutions to tackle this issu ...

Encountering issues when using react-leaflet in a React project with webpack integration

I've been attempting to import react-leaflet into my project without actually rendering any maps, but I keep getting this error message. TypeError: Object(...) is not a function I am certain that the issue stems from the import statement, as indica ...

I am experiencing an issue where my JavaScript code does not redirect users to the next page even

I'm experiencing an issue with this code where it opens another webpage while leaving the login screen active. I've tried multiple ways to redirect it, such as window.location.href and window.location.replace, but nothing seems to be working. Ide ...

Total Output Calculation

In my latest coding project, I have crafted a unique algorithm to calculate exam scores with the inclusion of interactive buttons! function incorrectResponse() { var calc = 0; var calc2 = 1; var divElement = document.createElement("div"); divEle ...

Creating a direct connection between a parent node and all of its children in OrgChartjs

Can I connect all children directly to one parent in Balkan OrgChart.js? This is my starting point based on the documentation of OrgChart.js. window.onload = function () { OrgChart.templates.family_template = Object.assign({}, OrgChart.templates.ana); ...

Once the image has been observed, what steps can be taken to close it?

I wish to implement a functionality where clicking on the view button will enlarge the image, and another click on the page will return it to its original size. import * as React from 'react'; import Box from '@mui/material/Box'; imp ...

What about a lightbox with enhanced jQuery features?

As a newcomer to jQuery, I've never experimented with lightboxes before. However, I was tasked with creating something fun for April Fools' Day at work. Naively, I accepted the challenge thinking it would be simple, but now I find myself struggli ...

The marriage of Vue 2.0 and Rails 5: Shifting from Reactive to Declarative Rendering

As I make my way through the Vue guide with a Rails 5 app, I've noticed that although I am able to update my Vue js object, the DOM doesn't behave as described in the Declarative Rendering section. The data and the DOM are supposed to be linke ...

Delete Entries in MongoDB Collection According to Unique User Pairs

I have a collection of messages stored in MongoDB and I need to keep only the latest 500 records for each pair of users. Users are identified by their sentBy and sentTo attributes. /* 1 */ { "_id" : ObjectId("5f1c1b00c62e9b9aafbe1d6c&quo ...

Display results in a Web application using Google Apps Script

function doGet() { return HtmlService.createHtmlOutputFromFile("vi"); // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>'); } function doPost() { return HtmlService.createHtmlOutputFromFile("vi"); // var out ...

A router that has numerous parameters will not function properly with express.static

I successfully created an express router with the parameter 'router.get('/add')' and it is working perfectly. However, when I added 'router.get('/edit/:id')', the express.static feature stopped working, causing issue ...