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

Question

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!

You are missing function E_Approval_Write { or something like this in the first code snippet — Konrad
– Konrad, Commented Apr 15, 2022 at 11:26

Konrad · Accepted Answer · 2022-04-15 11:25:16Z

1

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>

edited Apr 15, 2022 at 11:25

answered Apr 15, 2022 at 11:15

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related