Connected class component not passing state changes to stateless child component

[bugged84]

Consider the following snippet from another issue.

render() {
    const chatRooms = this.state.ChatRooms.map(chatRoom => (
      <RouteLink vm={this.vm} route={chatRoom.Route} key={chatRoom.Id}>
        <div>Chat Room {chatRoom.Id}</div>
      </RouteLink>
    ));

    return (
      <div>
        {this.state.lobby && <div>{chatRooms}</div>}
        <div id="Content2" />
      </div>
    );
}

To better maintain the code, I moved the list mapping logic to a new stateless component and updated the code above to the following.

render() {
    return (
      <div>
        {this.state.lobby && <ChatRoomList vm={this.vm} chatRooms={this.state.ChatRooms} />}
        <div id="Content2" />
      </div>
    );
}

The initial list displays fine after this refactor, but when the view model pushes changes to the list (or items in the list), then these changes are no longer rendered.

Is there a way to make this work, or am I stuck having all my code in one component?

[dsuryd]

Doesn’t seem like a dotNetify issue, more of a React issue. I suggest experimenting with React lifecycle hooks to find out why the state change doesn’t trigger re-render.

On Sun, Nov 18, 2018 at 1:54 PM bugged84 notifications@github.com wrote:

Consider the following snippet from another issue https://github.com/dsuryd/dotNetify/issues/133#issuecomment-432500912.

render() { const chatRooms = this.state.ChatRooms.map(chatRoom => (

Chat Room {chatRoom.Id}

));

return (
  <div>
    {this.state.lobby && <div>{chatRooms}</div>}
    <div id="Content2" />
  </div>
);

}

To better maintain the code, I moved the list mapping logic to a new stateless component and updated the code above to the following.

render() { return (

{this.state.lobby && }

);

}

The initial list displays fine after this refactor, but when the view model pushes changes to the list (or items in the list), then these changes are no longer rendered.

Is there a way to make this work, or am I stuck having all my code in one component?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/dsuryd/dotNetify/issues/148, or mute the thread https://github.com/notifications/unsubscribe-auth/AOS8kl7vbgS97JBhI-eYF0CromqCSEaAks5uwdcBgaJpZM4YoKVs .

[bugged84]

Actually it was a dotNetify issue, but it was my fault and unrelated to the stateless component. After going though my version control, I realized I had changed a $dispatch target action on the VM to async without regression testing. Apparently that's not supported at the moment, so I dropped the async/await and used .Wait() instead. Seems to be working now.