Как я могу удалить компонент React из DOM после клика по button внутри него?

Question

Структура компонента:

<div classname="parent">
    <div>something</div>
    <button classname="child"></button>
</div>

Компонент вызывается в другом компоненте:

<Button />

Как при клике на кнопку внутри компонента удалить его из DOM структуры?

Answer 1

Можно сверху дерева объявить стейт isShowButton например

const [isShowButton, setIsShowButton] = useState(true);
{isShowButton && <Button onRemoveButton={setIsShowButton(false)} />}

И внутри компонента кнопки повесить onClick:

<div classname="parent">
    <div>something</div>
    <button classname="child" onClick={() => props.onRemoveButton()}></button>
</div>

Если я правильно понял конечно))

Можно еще на button повесить id и по id удалить прям из dom дерева

document.getElementById("id").remove();