ReactR state and other components

[MarkusLang1987]

Hello,

first of all thank you for the awesome package. I love both technologies and played with it a bit.
In the documentation I found no way to pass state or child components.

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isFlipped: false
    };
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick(e) {
    e.preventDefault();
    this.setState(prevState => ({ isFlipped: !prevState.isFlipped }));
  }
 
  render() {
    return (
      <ReactCardFlip isFlipped={this.state.isFlipped} flipDirection="vertical">
        <YOUR_FRONT_CCOMPONENT key="front">
          This is the front of the card.
          <button onClick={this.handleClick}>Click to flip</button>
        </FrontComponent>
 
        <YOUR_BACK_COMPONENT key="back">
          This is the back of the card.
          <button onClick={this.handleClick}>Click to flip</button>
        </BackComponent>
      </ReactCardFlip>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#pivot-example"));

I would like to use this Flip Card Component for example. It is possible to pass state? This Component also only works with Childcomponents. Is there a way to pass an Actionbutton for example?

Thank you :-)

[alandipert]

Hi, thanks for the kind words, I'm glad you enjoy the package 😄

We don't currently support a way to do exactly this. The best you can do right now, which is not ideal because of network latency, is store an isFlipped reactiveVal in R and do your conditional logic on the server side.

It's not efficient, but it is conceptually consistent with the rest of Shiny. So, if you can get away with that, I recommend it. Let me know if a short example would be helpful, and I'd be happy to post one.

[MarkusLang1987]

Hello Alan,

thank you for your answer. I already "stole" the idea of passing state to reactiveValues to render stuff in the UI dynamically. That idea of React is great ;-).
Too bad that does not work yet, maybe that will be possible in the future.

[timelyportfolio]

I'll try to demonstrate another way of accomplishing this on the JS side. Hope to get some time this weekend.

[timelyportfolio]

@MarkusLang1987 still not a direct answer to your question, since we are using functional components rather than Class, but I spent some time to assemble some examples for discusson in flipcard. In the most recent version of reactR, I added mobx which provides a couple more ways to accomplish state.

There are three examples:

1. app.R - this is the most basic and does not use mobx. Rather state effectively stays in R/Shiny, and we use updateFlipcardInput in R/Shiny to flip the card.
2. app_mobx.R - here we start to use mobx in our implementation. You will see in JSX line that I wrap our component in observer which means that the component will re-render if an observable exists within the function body. Since we aren't using the value argument, I thought we could piggyback on its existence and let the value reference a global observable state object. We can then do interesting things like let click flip the card. We could also set up Shiny custom message handler to allow flip from Shiny.
3. app_mobx2.R - this uses mobx and demonstrates how we can flip on user click, with a JavaScript button, and with a Shiny actionButton.

@alandipert and @MarkusLang1987 I would love thoughts. I know this is a little convoluted.

[DSGYM]

Hello @timelyportfolio (@MarkusLang1987 here with my professional account). Sorry for the late response, I just came home from vacation.
Thank you very much for the effort. That is really awesome, but for me very difficult to understand, since I´m still learning JS/React.js in my freetime and have no clue yet about Redux, MobX etc. Guess this might also apply to many other prefessional shiny and R users :-(

Is there any way this will be easier in the future? I thought about using reactiveValues to manage state, but that was just my naive oppinion ;-). Anyway, I think this package and all of you guys effort can improve shiny greatly.

[timelyportfolio]

@DSGYM @MarkusLang1987 Ideally, a R user would not have to learn all the React state management possibilities :) I updated the app.R example to use a reactiveVal react-R/flipcard@e6d4186.

[DSGYM]

Yes, sure. I´m just very interested in what you are doing (which is absolutely crazy for me), so my personal intention here might differ from other Shiny/R Developers. Thanks for the update, but I´m not sure if this is a better solution, since input$btnflip is not dynamically passed to the function. Just my two cents :-)

[timelyportfolio]

I am not sure I understand. We could remove the reactiveVal and operate only on input$btnflip. Or we could pass state of flipcard as an input in Shiny. Or we could rewrite flipcard as a class instead of functional component.

[DSGYM]

Ok I see, there are many different ways to do it. Is there any preferable way to do anything? I´m asking because I want to create my own React widgets, no just use them :-)

[timelyportfolio]

@DSGYM Sorry, this has lingered for a year. Would you like to resume the conversation? I would enjoy working through state management with reactR if you still have interest. We have an unexplored world of hooks as well that might also provide another approach.