fortunar / react-sidemenu

React sidemenu component
57 stars 14 forks source link

Component only builds tree after initial mount and not on re render. #18

Closed iantbutler01 closed 5 years ago

iantbutler01 commented 5 years ago

Right now if you have to programmatically update the sidebar as in the case of the adding new sections they do not render because the tree is only built once right after the component mounts.

iantbutler01 commented 5 years ago

Got around this by hashing a property of the sections and setting the hash as the SideMenu's key attribute so when the sections change the key changes and forces a component rebuild/remount This is fine for my case as I don't imagine super-frequent changes so rebuilding the tree every time while not the fastest isn't a concern for me but it could be for other people.

fortunar commented 5 years ago

@GrandathePanda you are talking about the JSON config right? This would be a nice feature indeed. Could you maybe open a PR or send a gist?

The component is rebuilt if you pass a new array. If you mutate the old one the reference stays the same and the tree does not rebuild.

iantbutler01 commented 5 years ago

That was not true for me and on react's re-render I am constructing a new array each time. Below are the contents of my render.

let items = [{divider: true, label: "Documents", value: ""}];

        const buildDocs = (acc, _document) => {
            const doc = this._document(_document);

            acc[0].push(doc.ssmlSha);
            acc[1].push(doc);

            return acc;
        }

        const [shas, docs] = this.props.documents.reduce(buildDocs.bind(this), [[], []]);

        items.push(...docs);

        let key = shas.join("");

        return (
            <SideMenu key={key} items={items} activeItem={""}>
            </SideMenu>
        )
fortunar commented 5 years ago

@GrandathePanda thank you for reporting, working on a solution.

fortunar commented 5 years ago

@GrandathePanda fixed in 1.1.0.