Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

83
Visualizações
Add and remove items by index when pushed into state array with other array data React

I want to remove items from an array that are pushed into a state array. I can add but the remove is slightly confusing for me in terms of react. Current remove function does not work as it removes all, but the first element? I only want to be able to remove the added data e.g. 5,6,7,8

Stackblitz: https://react-ts-p6iwoh.stackblitz.io

Code so far:

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

interface Idata {
  name: string;
  values: number[];
}

const initialData: Idata[] = [
  {
    name: 'Title 1',
    values: [98, 15, 7, 8],
  },
  {
    name: 'Title 2',
    values: [44, 5, 7, 8],
  },
  {
    name: 'Title 3',
    values: [5, 7, 8, 9],
  },
  {
    name: 'Title 4',
    values: [76, 88, 9, 5],
  },
];

const addData: Idata[] = [
  {
    name: 'Title 5',
    values: [98, 15, 7, 8],
  },
  {
    name: 'Title 6',
    values: [44, 5, 7, 8],
  },
  {
    name: 'Title 7',
    values: [5, 7, 8, 9],
  },
  {
    name: 'Title 8',
    values: [76, 88, 9, 5],
  },
];

const App: React.FunctionComponent = () => {
  const [tag, setTag] = React.useState<Idata[]>(initialData);

  return (
    <React.Fragment>
      <div className="intial-data">
        {tag?.map((inner: Idata, index: number) => {
          return <div key={index}>{inner.name}</div>;
        })}
      </div>
      <br />
      <div>
        {addData?.map((inner: Idata, index: number) => {
          return (
            <React.Fragment key={index}>
              <div>
                {inner.name}{' '}
                <button
                  onClick={() =>
                    setTag((oldArray) => [...oldArray, addData[index]])
                  }
                >
                  Add
                </button>
                <button
                  onClick={() =>
                    setTag((oldArray) => oldArray.splice(index, 1))
                  }
                >
                  Remove
                </button>
              </div>
            </React.Fragment>
          );
        })}
      </div>
    </React.Fragment>
  );
};

render(<App />, document.getElementById('root'));
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

With regards to the comments below:

After you add an id to IData, you could use filter, like:

onClick={() =>
    setTag((oldArray) => {
        return oldArray.filter(item => item.id !== inner.id);
    })
}
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda