Javascript error: .remove is not a function

Question

I have a field that displayed list of "Template name".

The remove button supposedly will delete the Template name, but somehow failed to delete the selected Template from display.

  let EditChannelForm = props => {
  const {channelKeys, channelType} = props;
  let fields;
  
  if (channelKeys) {
    fields = channelKeys.map((ck, index) => {
    
      if(ck.key === "templateName") {
   
        return (
          <div  key={ck.key+ index}>
        <li key={ck.key + index} style={styl}>
        <Field
          component={renderField}
          validate={[required]}
          label={changeCase.titleCase(space(ck.key))}
          name= {ck.key + index}
      />

 <Button type="danger" icon="delete" onClick={() => channelKeys.remove(ck.key + index)} >Remove</Button>
              
              </li>
              </div>

I got the error

channelKeys.remove is not a function

Is there anything I need to change in onClick={() => channelKeys.remove(ck.key + index)} ?

Does channelKeys have a method called remove?

CoodleNoodle
– CoodleNoodle

2020-11-01 16:47:10 +00:00
Commented Nov 1, 2020 at 16:47 — CoodleNoodle
– CoodleNoodle, Commented Nov 1, 2020 at 16:47

Dhruvi Makvana · Accepted Answer · 2020-11-02 17:01:43Z

1

There is no function such as Array.prototype.remove. Please see the docs.

If you want to remove a specific item from the array use Array.prototype.filter.

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(item => item !== valueToRemove)
console.log(filteredItems)

same can be used for the object-based array.

let cities = [
    {name: 'Los Angeles', population: 3792621},
    {name: 'New York', population: 8175133},
    {name: 'Chicago', population: 2695598},
    {name: 'Houston', population: 2099451},
    {name: 'Philadelphia', population: 1526006}
];

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);

Edit:

let cities = [
    {name: 'Los Angeles', population: 3792621},
    {name: 'New York', population: 8175133},
    {name: 'Chicago', population: 2695598},
    {name: 'Houston', population: 2099451},
    {name: 'Philadelphia', population: 1526006}
];

let bigCities = [];

function remove(cityName){
  for (let i = 0; i < cities.length; i++) {
      if (cities[i].name !== cityName) {
          bigCities.push(cities[i]);
      }
  }
  return bigCities;
}
console.log(bigCities);

<Button type="danger" icon="delete" onClick={() => remove(ck.name)} >Remove</Button>

edited Nov 2, 2020 at 17:01

answered Nov 1, 2020 at 16:52

Dhruvi Makvana

9135 silver badges17 bronze badges

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

2 Comments

Shiro Gin Over a year ago

you mean I need to link the onclick with filter that actually do 'reverse filter'?

Dhruvi Makvana Over a year ago

yes, you can create a remove function, which will have a filter function inside. Please refer new edit.

Collectives™ on Stack Overflow

Javascript error: .remove is not a function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related