Toggle Number Selection in State Array

PHOTO

Thu Oct 31 2024 10:37:51 GMT+0000 (Coordinated Universal Time)

Saved by @desiboli #javascript #typescript #react.js

import React from 'react';

/**
 * Toggles the presence of a number in the selectedNumbers array state.
 *
 * @param number - The number to toggle in the selection.
 * @param setSelectedNumbers - The state setter function from useState.
 */
const toggleNumber = (
  number: number,
  setSelectedNumbers: React.Dispatch<React.SetStateAction<number[]>>
): void => {
  setSelectedNumbers((prevSelectedNumbers) => {
    if (prevSelectedNumbers.includes(number)) {
      // Number is already selected; remove it from the array
      return prevSelectedNumbers.filter((n) => n !== number);
    } else {
      // Number is not selected; add it to the array
      return [...prevSelectedNumbers, number];
    }
  });
};

// Initialize State in Your Component
const [selectedNumbers, setSelectedNumbers] = useState<number[]>([]);

// Use the toggleNumber Function
// Example usage within a component event handler
const handleNumberClick = (number: number): void => {
  toggleNumber(number, setSelectedNumbers);
};

// Implement in JSX
<button onClick={() => handleNumberClick(5)}>
  {selectedNumbers.includes(5) ? 'Deselect 5' : 'Select 5'}
</button>

COPY

The toggleNumber function manages the selection state of numbers within an array. It adds a number to the array if it’s not already present or removes it if it is. This is particularly useful in scenarios like multi-select lists or checkboxes where users can select or deselect items.

Save snippets that work from anywhere online with our extensions

Comments

JavaScript

@desiboli

Horizontal scroll on element when user scrolls up & down Horizontal scroll on element when user scrolls up & down (React) how to remove https or http from url in javascript code example | Newbedev Shuffle an array Check if date is valid Copy text to clipboard Find the day of the year Capitalize a string Find the number of days between two days Clear all cookies Generate random HEX color Remove duplicates from array Get query params from URL Log time from date Check if a number is even or odd Find average of numbers Check if array is empty Get selected text Detect dark mode Scroll to Top Scroll to Bottom Convert Fahrenheit / Celsius Animate header on scroll with Next.js & TailwindCSS Check if all values in a nested object are equal Generate random string Extract Domain Name From An Email Check if An Element is Focused Check If An Array Is Empty Redirecting User - you can redirect the user to any specific URL using JavaScript. Check If A Variable Is An Array Spacer react component using styled-components Filter array by value Toggle Number Selection in State Array

React

@desiboli

Horizontal scroll on element when user scrolls up & down (React) Animate header on scroll with Next.js & TailwindCSS Spacer react component using styled-components Toggle Number Selection in State Array

Typescript

@desiboli

Toggle Number Selection in State Array

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#javascript

Get URL and URL Parts in JavaScript

var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search

#javascript

Add event listener to multiple buttons with the same class

    btns = document.getElementsByClassName("saveBtn");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
			//Add function here
        });
    }

#javascript

Replace Textarea with Codemirror editor

<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">

<body>
	<textarea class="codemirror-textarea"></textarea>
</body>

<script>

$(document).ready(function(){
    var codeText = $(".codemirror-textarea")[0];
    var editor = CodeMirror.fromTextArea(codeText, {
        lineNumbers : true
    });
});

</script>

<script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>

#javascript #nodejs #commandline

HTTPS Redirect in Nodejs

npm install heroku-ssl-redirect

> More steps

#react.js #redux

Check if token expires and logout user

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

#javascript #nodejs

Save to MongoDB without Duplicates Using Mongoose

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

const exampleSchema = new Schema({
    title: { type: String , required: true},
    content: [{type: String}]
});


var Example = mongoose.model('Example', exampleSchema);
module.exports = Example;

> More steps

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#javascript

Full Stack Developer

function full_stack_developer() {
    full_stack_developer();
}

#javascript

3 Ways To Detect Selenium Bots Using Javascript - CodingTutz

if (navigator.webdriver) {
    document.body.innerHTML = "This is a Bot";
}

#javascript #promises #howto

How to Get the Domain From A URL Using Javascript

var url = "http://scratch99.com/web-development/javascript/";
var urlParts = url.replace('http://','').replace('https://','').split(/[/?#]/);
var domain = urlParts[0];

#javascript #javascript #functions #parameters

Required Parameters for Functions in JavaScript

 const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// These will throw errors
hello();
hello(undefined);

// These will not
hello(null);
hello('David');
The idea here is that it uses default parameters, like how the b parameter here has a default if you don’t send it anything:
function multiply(a, b = 1) {
  return a * b;
}

#javascript

Mapping an Object

const object1 = {
  a: 'somestring',
  b: 42
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

#javascript

Copy Text to Clipboard with Line Breaks

function copyToClipboard(){

    var codeToBeCopied = document.getElementById('code-snippet').innerText;
    var emptyArea = document.createElement('TEXTAREA');
    emptyArea.innerHTML = codeToBeCopied;
    const parentElement = document.getElementById('post-title');
    parentElement.appendChild(emptyArea);

    emptyArea.select();
    document.execCommand('copy');

    parentElement.removeChild(emptyArea);
    M.toast({html: 'Code copied to clipboard'})

    }

#javascript

How to store fetch response in javascript variable - Stack Overflow

async function fun() {
  return fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
}

const data  = await fun();

Toggle Number Selection in State Array

Save snippets that work from anywhere online with our extensions

Comments

More like this

JavaScript

React

Typescript

Browse more snippets >>

Toggle Number Selection in State Array

Save snippets that work from anywhere online with our extensions

Comments

More like this

JavaScript

React

Typescript

Browse more snippets >>

Embed code snippet