How to control JSX component using filter() in React?

April 15, 2022

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!

>Solution :

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>