How to choose only a few items from a . map

Asked

Viewed 46 times

0

I’m making an app similar to facebook, all posts are on a . map:

{datapost !== undefined && datapost.map(item => {
                        return (
                            <div className="publicacao">
                                <div className="conteudo">

                                    <div className="title">
                                        <div className="title-content">
                                            <h2>{item.title}</h2>
                                        </div>
                                        <div className="title-btn">

                                            <button
                                                onClick={() => setModalShow(true)}>
                                                <img src={trash} alt="botão excluir" />
                                            </button>
                                            <ModalDelete
                                                show={modalShow}
                                                onHide={() => setModalShow(false)}
                                            />
                                        </div>
                                    </div>
                                    <div className="username">
                                        <p>@{item.username}</p>
                                    </div>
                                    <div className="content">
                                        <h3>{item.content}</h3>
                                    </div>
                                </div>
                                <hr />
                            </div>
                        )
                    })}

I’ve already used Redux to save the id of the post that the user creates, I need to list the options to edit and delete only for these id’s. but I don’t know how.

here is the delete post button:

<button
   onClick={() => setModalShow(true)}>
   <img src={trash} alt="botão excluir" />
</button>
<ModalDelete
   show={modalShow}
   onHide={() => setModalShow(false)}
 />

here the modal that the button opens:

return (
        <Modal
            {...props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
            style={{ fontFamily: "Questrial" }}
        >
            <Modal.Header>
                <Modal.Title id="contained-modal-title-vcenter">
                    DELETE THE POST
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <p>
                    are you sure?
                </p>
                <Button onClick={Delete}>YES</Button>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={props.onHide}>CLOSE</Button>
            </Modal.Footer>
        </Modal>
    );

here is the Redux that saves the id:

const [idvalue, setIdvalue] = useState([])
    
    const ids = useSelector(
        state => state.data,
        [idvalue]);

    const dispatch = useDispatch();

    // action
    function addID(params) {
        dispatch({ type: 'ADD_ID', id: idvalue })
    }
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.