Как удалить текст из предыдущего элемента, если условие не выполняется - reactjs

Question

Я создаю небольшое приложение в реакции js, которое в основном будет отображать SELECTED, если элемент выбран.

Вот мой код:

import React, { useState } from 'react';


function SelectedFiles(props) {
  const [selectedFile, setSelectedFile] = useState(0);

  const selectSelectedFileOnChange = id => {
    setSelectedFile(id);
    props.onSetSelectedFile(id);
  };

  return (
    <MainContainer>
      <RadioButton
        key={props.id}
        value={props.id}
        name="Acfile"
        onChange={e => {
          selectSelectedFileOnChange(props.id);
        }}
        disabled={false}
      ></RadioButton>
      <span>{props.file.name}</span>
      <span>{props.file.size}</span>
      <span>{props.file.isPrimary === true ? 'SELECTED' : null}</span>

    </MainContainer>
  );
}

export default SelectedFiles;

Этот компонент является частью родительского компонент и назначение этого компонента - просто показать элементы:

<AddF className="modal-body">
  {docs && docs.length > 0
    ? docs.map(file => (
        <SelectedFiles
          key={file.id}
          id={file.id}
          file={file}
          onSetSelectedFile={handleSetPrimaryFile}
        />
      ))
    : null}
</AddF>

  const handleSetPrimaryFile = id => {
    props.onSetPrimaryFile(id);
  };

Как можно видеть парней, я не знаю, как удалить текст из элемента NOT SELECTED ..

Спасибо, ребята! Приветствия

Answer 1

Не могли бы вы попробовать ниже и посмотреть, работает ли он?

const [files, setFiles] = useState({docs[0].id: true});
<AddF className="modal-body">
  {docs && docs.length > 0
    ? docs.map(file => (
        <SelectedFiles
          key={file.id}
          id={file.id}
          file={file}
          isPrimary={!!files[file.id]}
          onSetSelectedFile={handleSetPrimaryFile}
        />
      ))
    : null}
</AddF>

  const handleSetPrimaryFile = id => {
    setFiles({[id]: true});
    props.onSetPrimaryFile(id);
  };

Изменить SelectedFiles.js на

  <span>{props.isPrimary === true ? 'SELECTED' : null}</span>

Надеюсь, это поможет.

Answer 2

Этот фрагмент {props.file.isPrimary === true ? 'SELECTED' : null} определяет, когда должно появиться SELECTED. Но я не вижу, где props.file когда-либо изменится.

Я также вижу, как вы используете как useState ловушку, так и какую-то функцию поддержки, переданную для обработки выбора.

решение состоит в том, чтобы иметь какой-то уникальный идентификатор для файлов (возможно, это file.id), затем проверьте это значение на selectedFile, чтобы определить, должно ли появиться SELECTED, например, props.file.id === selectedFile.