Add react component as property to another react component (Material-UI)

[shybyte]

Some libraries like material-ui require to add components as properties to another react component.

JSX Example (See live/complete):

render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        keyboardFocused={true}
        onTouchTap={this.handleClose}
      />,
    ];

    return (
      <div>
        <RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
        <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
          The actions in this window were passed in as an array of React objects.
        </Dialog>
      </div>
    );
  }

I wonder if this is possible in purescript-pux. The following approach does not work. Is there a way which works?

foreign import raisedButtonClass :: ∀ props. ReactClass props
raisedButton = reactClassWithProps raisedButtonClass "RaisedButton"
foreign import dialogClass :: ∀ props. ReactClass props
dialog  = reactClassWithProps dialogClass "Dialog"

...

dialog {
    -- the next line does not work
    actions: [(raisedButton {label: "Close"} #! onClick (const ToggleDialog) $ mempty)],
    open: state.isDialogOpen,
    title: "Dialog Title"
  }
  #! (on "onRequestClose" (const ToggleDialog))
  $ text "Dialog Text"

You can find a complete example here: https://github.com/shybyte/pux-starter-app-material-ui/blob/master/src/Main.purs

[i-am-the-slime]

I have the same question, for a different library (ant.design). Have you made any progress on this in the meantime @shybyte ?

[shybyte]

@i-am-the-slime I haven't found a solution for this problem. Actually I haven't tried much longer. Once a year I start to learn PureScript but every time again in practice I stumble over the pureness part of it and I give up. But still, if you find a solution, please post it here, so I have a better start next year :-)

[kritzcreek]

For these kind of things you'll want to directly use purescript-react purescript-pux is not really compatible with the component model of React. It is a direct port of the Elm architecture, which has a monolithic state atom (Redux is that for the React ecosystem).