CODEWITHSUNDEEP
reactjsstaterendersemantic-uisidebar
amlwwalker
amlwwalker

Reputation: 3304

Semantic UI React side bar render pusher only on visibility change (redux/rematch)

I am using react and semantic. I am using the multiple sidebar example. The idea is that the left hand sidebar offers up some menu options, and then the right hand sidebar is the sub menu based on which option from the left menu is chosen. When a sub menu item is selected, a component is added to the Sidebar.Pusher, i.e displayed on the page. It all works except re-rendering the content of the Sidebar.Pusher. This apparently only updates when the left hand side bar's visibility changes. I am using redux/rematch to handle state, and can see that the state that holds the content of the Sidebar.Pusher is being updated, but `render() is only being called when visibility changes of the sidebar.

The content of Sidebar.Pusher is an array, and I even tried displaying on the page the length of the array, which is being updated (pushed into) each time an item on the right hand sidebar is clicked. However this doesn't cause a render() to be fired, its literally when the left hand sidebar visibility changes.

Just to note, I did see this issue, however its from last year, and the answer wasn't enough for me to be able to fix the issue. Help would be appreciated.

Structure:

Index.js renders App.js, App.js renders Menu.js (which is a semantic set of tabs). One of the menu options is Sidebar.js which renders:

    <Sidebar.Pushable as={Segment}>
      <Sidebar
        as={Menu}
        animation="overlay"
        direction="right"
        inverted
        vertical
        visible={secondaryVisibility}
        width="wide"
      >
        {focusedList.map((el, i) => {
          return (
            <Menu.Item key={i} as="a" onClick={() => this.addSegment(el)}>
              <Article el={el} />
            </Menu.Item>
          )
        })}
      </Sidebar>
      <Sidebar
        as={Menu}
        animation="overlay"
        icon="labeled"
        inverted
        // onHide={this.handleSidebarHide}
        vertical
        visible={primaryVisibility}
        width="wide"
      >
        <Menu.Item
          onClick={() => this.changeTab(menuItem)}
          as="a"
          name="menuItem"
          header
        >
          Menu Item
        </Menu.Item>

      </Sidebar>
      <Sidebar.Pusher style={{ minHeight: "600px" }}>
        <Segment basic>
          {segments.map((el, i) => {
            console.log(`el ${el}`)
            return <Content key={i} segment={el} />
          })}
        </Segment>
      </Sidebar.Pusher>

and all state (secondaryVisibility etc) is stored in rematch

Thanks

Upvotes: 0

Views: 1375

Answers (2)

amlwwalker
amlwwalker

Reputation: 3304

I got it. I forgot about immutability in state. Perhaps someone will benefit from this.

I was trying to update a state array with

  let tmp = prevState.contract.segments
  tmp.push(segment)
  this.update({ segments: tmp })

However, this won't work as tmp is a reference to prevState.contract.segments, so this won't work, as pushing to tmp is equivelent to pushing to prevState.contract.segments.

you have to have a completely new array:

  const tmp = [...prevState.contract.segments, segment]
  this.update({ segments: tmp })

Now it works.

Upvotes: 0

Ross
Ross

Reputation: 11

I haven't been able to identify the problem based on the code you've posted, could you provide more info such as the entire Sidebar.js and maybe what's in the Content component?. My guess would be that there's a HOC or lifecycle method getting in the way.

I've created a trivial example that seems to work fine, if I understand what you're trying to accomplish: https://codesandbox.io/s/myl6xpz9py

Upvotes: 1

Related Questions