Add and delete value from an array in react dynamically

Question

I have multiple buttons in react, once I click on the button, its value is saved in an array. I want, when I click on any button that its value is saved only once, after click on that button again the value should be removed from an array.

e.g.

When I press "click 1" button the array value should be ["1"] and change the button color, after second click it should be removed.

import React, {useState} from 'react'; 
const UserDetails = () => {
const [selecthostingOption,setselecthostingOption] = useState([]);

console.log(selecthostingOption);


const hostingChange = (e) => {
  e.preventDefault();
  const value = e.target.value
  setselecthostingOption(selecthostingOption => [
    ...selecthostingOption,value
  ])

}   
return(
<>
   <button onClick={hostingChange} name="selecthostingOption" value="1">Click 1</button>
   <button onClick={hostingChange} name="selecthostingOption" value="2">Click 2</button>

</>
)
}

Siva Kondapi Venkata · Accepted Answer · 2020-03-24 09:27:26Z

1

Check the value if already in selections,

const hostingChange = e => {
  e.preventDefault();
  const value = e.target.value;

  if (selecthostingOption.includes(value)) {
    setselecthostingOption(selecthostingOption.filter(x => x !== value));
  } else {
    setselecthostingOption([...selecthostingOption, value]);
  }
};

Change both button styles based on selections

<button onClick={hostingChange} name="selecthostingOption" style={{
    color: selecthostingOption.includes("1") 'red' : ''
  }} value="1">Click 1</button>

answered Mar 24, 2020 at 9:27

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adnan Arif Over a year ago

how to make it dynamic please. Like selecthostingOption.includes("1") in this line, can i make it dynamic instead of static includes. @Siva Kondapi Venkata

Siva Kondapi Venkata Over a year ago

@AdnanArif, Yes, you can do that. like

['1', '2'].map(id => (<button onClick={hostingChange} name="selecthostingOption" style={{     color: selecthostingOption.includes(id) 'red' : ''   }} value={id}>

Click ${id}</button>)`

mzedeler · Accepted Answer · 2020-03-24 09:32:04Z

0

Don't use an array for something like this. Use an object:

import React, { useState } from 'react'; 

const UserDetails = () => {
  const [hostingOptions, setHostingOptions] = useState({});

  const hostingChange = (e) => {
    e.preventDefault()
    const value = e.target.value
    setHostingOptions(!!hostingOptions[value])
  }

  return(
    <>
      <button onClick={hostingChange} name="selecthostingOption" value="1">Click 1</button>
      <button onClick={hostingChange} name="selecthostingOption" value="2">Click 2</button>
    </>
  )
}

answered Mar 24, 2020 at 9:32

mzedeler

4,3994 gold badges30 silver badges45 bronze badges

2 Comments

Adnan Arif Over a year ago

Then how I will get all values from same name options.

mzedeler Over a year ago

In your example, they have different values (1 and 2).

Collectives™ on Stack Overflow

Add and delete value from an array in react dynamically

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related