Как можно удалить конкретный элемент при клике на кнопку?

Question

Есть вот такая табличка

И ее код

<table id={'tableH'} className="history__body">
    {
      this.props.room?.discussions.map((d) => d.end != null && (
        // eslint-disable-next-line react/jsx-key
        <div className={'history__story__body'}>
          <Story discussionId={d.id} onClick={this.handleClickOpen} key={d.id} title={d.title} average={d.averageVote} />
          <Button onClick={undefined} className={'history__story-btnDelete'} title={<img src={remove} />} />
        </div>
      ))
    }
  </table>

const Story: React.FC<IProps> = (props) => {
  return <div onClick={() => props.onClick(props.discussionId)}>
    <tr className="history__story">
      <td>{props.title}</td>
      <td className="history__story-value">{props.average}</td>
    </tr>
  </div>
    ;
}

И такие story вместе с кнопкой справа от нее добавляются в эту табличку. Так вот как удалить всю конкретную строчку при клике на кнопку?

Answer 1

Это простой пример как надо удалять строку из таблицы, надеюсь вам будет полезно:

const {useState} = React;

function Row({company, remove}) {
  return (
    <tr>
      <td>{company.name}</td>
      <td>{company.contact}</td>
      <td><button onClick={remove}>Delete</button></td>
    </tr>
  )
}

function Table({companies, setCompanies}) {
  
  const removeCompany = (index) => {
    setCompanies(companies.filter((company, i) => i !== index));
  }
  
  return (
     <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Action</th>
      </tr>
      {companies.map((item, index) => <Row company={companies[index]} remove={() => removeCompany(index)}/>)}
    </table> 
  )
}

function App() {
  const [companies, setCompanies] = useState([
    {
      name: 'Company 1',
      contact: 'Company 1 contact'
    },
    {
      name: 'Company 2',
      contact: 'Company 2 contact'
    },
    {
      name: 'Company 3',
      contact: 'Company 3 contact'
    },
    {
      name: 'Company 4',
      contact: 'Company 4 contact'
    },
    {
      name: 'Company 5',
      contact: 'Company 5 contact'
    },
  ]);
  
  return (
    <Table companies={companies} setCompanies={setCompanies}/>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

Поставьте key для history__story__body и уберите // eslint-disable-next-line react/jsx-key. Будет что-то вроде key="d.id"
Нужно написать функции ВМЕСТО onClick={undefined}. Что это будет за функции, уже зависит от того, ОТКУДА вы берёте данные в пропсах props.room.discussions. Т.е. ТАМ где формируются данные. Скорее всего, нужно сделать запрос на сервер. И потом только удалять
После ответа от сервера, или если нужно только локально (без запроса на сервер), меняете стейт, НЕ мутируя данные. Как-то так https://jsfiddle.net/e3try762/

БЛОГ НА HUSL

Как можно удалить конкретный элемент при клике на кнопку?

Ответы (2 шт):