How to dynamically add items to Sortable plugin ()

Topic: How to dynamically add items to Sortable plugin (<MDBSortable />)

jimgroome asked 5 years ago

Hello!

I'm using the component in my project. I'd like to add things to the list of sortable items, but can't seem to get it working. Here's a simplified version of my code:

import React, { useState } from "react";
import { MDBBtn } from "mdbreact";
import MDBSortable from "mdb-react-sortable";

const DynamicSortable = () => {
const [sortableItems, setSortableItems] = useState([
    "This is the first item",
    "This is the second item",
    "This is the third item"
]);
const [sortableComponent, setSortableComponent] = useState(
    <MDBSortable items={sortableItems} axis="y" />
);

const addNewItem = itemText => {
    let newSortableItems = [].concat(sortableItems);
    newSortableItems.push(itemText);

    const newSortableComponent = (
    <MDBSortable items={newSortableItems} axis="y" />
    );

    console.log("Adding new item " + itemText);
    console.log(newSortableItems);
    console.log(newSortableComponent.props.items);

    setSortableItems(newSortableItems);
    setSortableComponent(newSortableComponent);
};

return (
    <>
    {sortableComponent}
    <MDBBtn onClick={e => addNewItem("This is a new item")}>
        Add new item
    </MDBBtn>
    </>
);
};

export default DynamicSortable;

In short, this does the following:

Creates an array in the state called sortableItems
Creates an <MDBSortable /> component in the state called sortableComponent, and gives the sortableItems array as the items prop
Displays the sortableComponent component on the page
Displays an <MDBBtn /> which, when clicked, adds something to the sortableItems array, and updates the sortableComponent component in the state

The sortableComponent component displays exactly as expected when the page loads. The button adds a new item to the sortableItems array, as expected. The sortableComponent updates in the state, as expected. However the actual sortableComponent that's displayed on the page doesn't update.

I have included a few console.log()s in my code to show that the various state changes are being made as expected.

Can anybody see anything I might be doing wrong? Is what I'm trying to do here even possible?

Many thanks,

Jim

Add comment

Jakub Chmura staff premium answered 5 years ago

1 0 Best answer

Hi @jimgroome,

Thank you for your feedback.

I can't answer this question right now because I need some time to check what's going on. I set a high priority for this task and I will try to find a solution to this situation as soon as possible.

Best Regards,

Kuba

jimgroome commented 5 years ago

Hi @Jakub Chmura, thanks so much. If you need any more information then please let me know.

Jakub Chmura staff premium commented 5 years ago

Ok. When I will need more information, I'll let you know.

Add comment

Jakub Chmura staff premium answered 5 years ago

1 0 Best answer

Hi @jimgroome,

It seems to me that this is a problem with our component and state updating inside of it. I added the task to our bug list with high priority and we will try to solve this problem as soon as possible.

Best, Kuba

jimgroome commented 5 years ago

So I wasn't going mad! That's great. Thanks for your support, and best of luck!

Jakub Chmura staff premium commented 5 years ago

We already fix this issue and we are in a test phase. When everything will be alright we publish a solution in the next release.

Best, Kuba

jimgroome commented 5 years ago

That's fantastic news, and thank you for the update! Will look forward to using the plugin in my project. Jim

Jakub Chmura staff premium commented 5 years ago

You're welcome!

jimgroome commented 5 years ago

Hi @Jakub Chmura, is there an ETA for the new version of the Sortable plugin? I'd like to get started on the next phase of this project and if I was able to use Sortable it would make things a lot simpler!

Thanks again for the continued support.

Jakub Chmura staff premium commented 5 years ago

We already fix this bug, and if tests go well we will publish a solution in the next release on Monday.

Best, Kuba

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB React
MDB Version: 4.25.2
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

Russell Teesdale

62Support score
3Questions 4Answers

0Snippets likes 0Snippets