React-rails: Rendering component inside a component leads to reference error.

[Deekor]

Hey guys playing around with this gem. I installed it with webpacker. It seems to work fine for one component but when I try to render another component inside the first I'm seeing this issue: Uncaught ReferenceError: BotCard is not defined

I can render the BotCard just fine through the view: <%= react_component "BotCard" %> but not from the BotTradeList component.

.erb:

<%= react_component "BotTradeList" %>

javascript/components/BotTradeList.js

import React from "react"
import PropTypes from "prop-types"
class BotTradeList extends React.Component {

    constructor() {
        super();
        this.state = {data: []}
    }

    componentDidMount() {
        $.get('/api/bot', function (data) {
            this.setState({data: data})
        }.bind(this));
    }

    render() {
        let cards = this.state.data.map((data) => <BotCard data={data}/>);

        return (
            <div className="row">
                {cards}
            </div>
        );
    }
}

export default BotTradeList

javascript/components/BotCard.js

import React from "react"
import PropTypes from "prop-types"
class BotCard extends React.Component {
  render () {
    return (
      <div>
        <div>Data: {this.props.data}</div>
      </div>
    );
  }
}

BotCard.propTypes = {
  data: PropTypes.node
};
export default BotCard

[BookOfGreg]

You need to import the components you are using at the top of the file:

import React from "react"
import PropTypes from "prop-types"
import BotCard from "./botCard"
...

Nothing is revealed to the global namespace except ReactRailsUJS so you can't reference them directly.

[BookOfGreg]

Let me know if that doesn't help and I can re-open.

[Deekor]

Thanks! This is only my second time using React and the first was with the asset pipeline. Thanks for answering a noob question.

[BookOfGreg]

No problem, glad I could help! 😄