I'm currently using child components which returns JSX.
//PARENT COMPONENT
import ApprovalTableElement from './E_Approval_Element.js';
//JSX of E_Approval_Element.js
const [approvalElement, setApprovalElement] = useState([ApprovalTableElement]);
//Add one more approval column
const addApprovalSpace = () => {
setApprovalElement([...approvalElement, ApprovalTableElement]);
};
return (
<div className={styles['EApprovalWriteDiv']}>
<div className={styles['authDiv']}>
{approvalElement.map((element, index) => (
<button>DELETE ONE APPROVAL SECTION</button>
<ApprovalTableElement index={index} />
))}
</div>
</div>
);
};
export default E_Approval_Write;
//CHILD COMPONENT
function ApprovalTableElement() {
return (
<>
<table className={styles['approvalTable']}>
<tbody className={styles['approval']}>
<tr className={styles['name']}>
<th>
<select style={{ marginLeft: 10 }}>
<option>선택</option>
<option>결재자</option>
<option>합의자</option>
</select>
</th>
</tr>
<tr className={styles['signature']}>
<td>
<div>SIGN</div>
</td>
</tr>
<tr className={styles['name']} onClick={memberModalTrigger}>
<td>
<Typography variant='button' display='block'>
</Typography>
</td>
</tr>
</tbody>
</table>
</>
);
}
export default ApprovalTableElement;
with this code, what I'm trying to do is using
{approvalElement.map((element, index) => (
<button>DELETE ONE APPROVAL SECTION</button>
<ApprovalTableElement index={index} />
))}
this button, deleting selected ApprovalTableElement.
right now, I have this UI. When I click + button, I keeps adding component. But when I click remove button, the table attached to the button should disappear. BUT not the other ones.
All I can know is the index of the Component, so I am really confusing on how to delete the targeted component using filter().
OR, should I add button tag inside the CHILD COMPONENT not the PARENT COMPONENT?
However, If I can make what I'm trying to do with this code, please tell me how to set up the code properly to make things possible. Thank you!
Just pick those which id is different from the one you are deleting
const removeApprovalSpace = (id) => {
setApprovalElement(items => items.filter(item => item.id !== id));
};
//usage
<button onClick={() => removeApprovalSpace(id)}>Remove</button>
If you don't have id's you can use index
const removeApprovalSpace = (index) => {
setApprovalElement(items => items.filter((item, i) => i !== index));
};
//usage
<button onClick={() => removeApprovalSpace(index)}>Remove</button>