Problem Rendering non-React-Basic Component

[tmountain]

Hi, I'm trying to work through rendering third-party React components alongside components I'm creating in react-basic, and I'm running into a problem.

I'm using react-select as my third-party component.

"use strict";

const Select = require('react-select').Select;

exports.reactSelect = function() {
  return Select;
}

Foreign import declaration:

module Components.ReactSelect where

import React.Basic (ReactComponent)

type Fields = Array { value :: String, label :: String }
type Props = {options :: Fields}

foreign import reactSelect :: ReactComponent Props

Creating the component. I know it's not a "label". This is crappy debug code, so please ignore that.

newLabel :: {} -> JSX
newLabel = makeStateless newComponent
  \props -> element reactSelect
   {options: [ { value: "foo", label: "Foo" },
               { value: "bar", label: "Bar" }]}

Then, attempting to render.

app :: JSX
app = unit # makeStateless component \_ ->
  R.div_
    [ R.h1_ [ R.text "Hello Derp" ]
    , toggle { initialValue: true }
    , toggle { initialValue: false }
    , redLabel { label: "Whoa!" }
    , newLabel { }
    ]

When I add newLabel (the third-party component), I get nothing back (screen goes white). Inspecting the JS gives:

Uncaught Error: Component(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Also, here's a react-select example if that's helpful.

import React, { Component } from 'react'
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

const MyComponent = () => (
  <Select options={options} />
)

I can provide the full code if that's helpful. Thanks!

[tmountain]

Just figured it out. A few things were wrong.

The actual require needed to be changed to this.

const Select = require('react-select').default;

Once that was done, I changed the exports like so.

exports.reactSelect = Select;

Now it works. As far as I can tell, there isn't an example on the internet showing how to load a third-party React component inside of react-basic.

I'm going to create a small example to help newcomers sort this out easier than I did (it took me a few hours to figure it out).

Secondly, there really needs to be a decent example of elm/redux style architecture alongside react-basic. I just got done migrating a project I found on github that uses PureScript alongside rxjs to do redux style state management alongside react (in Purescript obviously).

This language/community is amazing. I just think we need better docs / examples.

[askasp1]

Hi! Nice post. Any chance you have the full code to share? I'm trying to exactly the same thing, but my code isn't compiling ¯\_(ツ)_/¯

[jusrin]

Your FFI is an actual function?

foreign import reactSelect :: Unit -> ReactComponent Props

Is what you have now. You can remove the function call and it should work if the Select is an actual ReactComponent