Mapping to React Modal renders all items from array instead of mapping by their ID

Question

My issue is that when I map the data into the Modal, it is returning all items from that field in the array e.g. mapping Business Name will return all business names in the array instead of 1.

I am also using React-Bootstrap-Table-Next in the same component to render data. A button is added to each row of the table which I would like to click and bring up more information on that particular row.

Button being rendered in the table with onClick handler to open the modal:

const columns = [
        { dataField: "View", text: "View", 
        formatter: () => {return <Button variant="success" onClick={handleShow}>View</Button>},
        headerStyle: () => {return { width: "5%" };} },
        { dataField: "BusinessName", text: "Business Name", headerStyle: () => {return { width: "27%" };} },
    ];

Modal state handling:

    const [showModal, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

Modal code with map function:

<Modal 
            show={showModal} 
            onHide={handleClose}
            size="lg" 
            centered
        >
            <Modal.Header closeButton>
                {submitted.map((item) => 
                <Modal.Title key={item.Id}> {item.BusinessName}</Modal.Title>
                )}  
            </Modal.Header>
            <Modal.Body></Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={handleClose}>
                    Close
                </Button>
                <Button variant="primary" onClick={handleClose}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>

Getting and setting the data:

const [submitted, setSubmitted] = useState([]);


const getSubmittedData = async () => {
        try {
            const response = await Axios.get(url);
            setSubmitted(response.data);
            console.log(response.data);
            setLoading(true);
        } catch (e) {
            console.log(e)
        }
    };

LightWrath · Accepted Answer · 2022-06-08 20:44:03Z

0

It's a little unclear what the expected result should be and what is contained in the submitted array.

Map will create a new array with all the returned values from the given function. If you're only wanting to render some values then maybe you need to filter first.

If you just want the items that include an Id then maybe something like

{submitted.filter(item => item.id).map(item => (
//render items here
)}

I don't have enough rep to comment to clarify information, so hope this is useful. Regards

answered Jun 8, 2022 at 20:44

LightWrath

751 silver badge7 bronze badges

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

Collectives™ on Stack Overflow

Mapping to React Modal renders all items from array instead of mapping by their ID

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