how to delete a component in react?-CodePudding

I want to delete it.But it won't be deleted. If you click the delete text in the modal, it should be deleted, but it doesn't work.What should I do to delete it? There's an error saying that onRemove is not a function.Please help me.

export default function Modal({ onRemove, id }) {
  return (
    <OptionModalWrap>
      <ModalWrapper>
        <TitleWrap>Edit</TitleWrap>
        <TitleWrap>Duplicate</TitleWrap>
        <DeleteText onClick={() => onRemove(id)}>Delete</DeleteText>
      </ModalWrapper>
    </OptionModalWrap>
  );
}

export default function GroupList({ title, onRemove }) {
  const [showModal, setShowModal] = useState(false);

  const optionModal = () => {
    setShowModal(prev => !prev);
  };

  return (
    <AdGroups>
      <Header>
        <Container>
          <ActiveWrap>
            <ActiveIcon src={Active} />
            <SubTitle>Active</SubTitle>
          </ActiveWrap>
          <Alaram>
            <Bell src={bell} />
            <Text className="alarmCount">10</Text>
          </Alaram>
        </Container>
        <EtcIconWrap>
          <EtcIcon src={plus} onClick={optionModal} />
          {showModal && (
            <OptionModal showModal={showModal} onRemove={onRemove} />
          )}
        </EtcIconWrap>
      </Header>
      <GroupTitle>{title}</GroupTitle>
    </AdGroups>
  );
}

export default function GroupPage() {
  const [Groupdata, setGroupData] = useState([]);

  const onRemove = item => {
    setGroupData(Groupdata.filter(item => item.id !== item));
  };

  useEffect(() => {
    fetch('./data/AdsGroup/AdsGroupList.json')
      .then(res => res.json())
      .then(res => setGroupData(res));
  }, []);

  return (
    <GroupPages>
      {Groupdata.map(item => {
        return (
          <GroupList key={item.id} title={item.title} onRemove={onRemove} />
        );
      })}
    </GroupPages>
  );
}

CodePudding user response：

You have not passed the id in GroupList and then also to the OptionModal component.

So here is the revised code:

Group Page Component:

Passing the id to GroupList Component

const onRemove = id => {
    setGroupData(Groupdata.filter(item => item.id !== id)); // you were item.id !== item which was wrong
  };

<GroupList key={item.id} title={item.title} id={item.id} onRemove={onRemove} /> // passing the id

Group List Component:

Added id in the props and passed that to Modal Component. Also calling optionModal function to close the Modal after it deleted

export default function GroupList({ id, title, onRemove }) {
  const [showModal, setShowModal] = useState(false);

  const optionModal = () => {
    setShowModal(prev => !prev);
  };

  return (
    <AdGroups>
      <Header>
        <Container>
          <ActiveWrap>
            <ActiveIcon src={Active} />
            <SubTitle>Active</SubTitle>
          </ActiveWrap>
          <Alaram>
            <Bell src={bell} />
            <Text className="alarmCount">10</Text>
          </Alaram>
        </Container>
        <EtcIconWrap>
          <EtcIcon src={plus} onClick={optionModal} />
          {showModal && (
            <OptionModal id={id} showModal={showModal} onRemove={onRemove;optionModal} />
          )}
        </EtcIconWrap>
      </Header>
      <GroupTitle>{title}</GroupTitle>
    </AdGroups>
  );
}

Modal Component: No change in this component

export default function Modal({ onRemove, id }) {
  return (
    <OptionModalWrap>
      <ModalWrapper>
        <TitleWrap>Edit</TitleWrap>
        <TitleWrap>Duplicate</TitleWrap>
        <DeleteText onClick={() => onRemove(id)}>Delete</DeleteText>
      </ModalWrapper>
    </OptionModalWrap>
  );
}

CodePudding user response：

Didn't your IDE complaint about this piece of code? both of the onRemove & filter functions' props are called item, it shouldn't be.

  const onRemove = itemId => {
    setGroupData(Groupdata.filter(item => item.id !== itemId));
  };