onChange function not working in a react component in a erb with react-rails

Question

I am using rails 5.1.7 with the react-rails gem, having a react component in one of my erb views with the react_component() helper I am trying to make an onChange event work, but the function does not respond in any way. I should be able to see the console log, but I am not seeing it.

import React from "react"
import PropTypes from "prop-types"


class CardList extends React.Component {

  constructor(props) {
    super(props);
    
    this.state = {
      all_cards: this.props.all_cards,
      orderBy: 'all',
    };

    this.handleChange = this.handleChange.bind(this);

  }

  handleChange(event) {
    console.log('change was made');
  }

  render () {

    const allData = this.state.all_cards.map((card, index) => (
          <div className="col-md-12">
            { card.category }
         </div>
    ));

    return (
      <React.Fragment>

        <label for="order">Order</label>

        <select onChange={this.handleChange} name="order" id="order_filter">
          <option value="element1">element1</option>
          <option value="element2">element2</option>
        </select>

        {allData}

      </React.Fragment>
    );
  }
}

CardList.propTypes = {
  all_cards: PropTypes.array
};

export default CardList

The component is called in my view as:

<%= react_component("cardlist", { all_cards: @all_cards }, {prerender: true}) %>

If I try adding the following to the serverRendering.js file:

ReactRailsUJS.mountComponents()

I get this error in the page the component is supposed to mount:

ExecJS::ProgramError in Cards#index
ReferenceError: document is not defined

---

I have also tried replacing React.Fragment with a <div> tag or changing the state in handleChange

Answer 1

It might be an issue with the way the components are being mounted onto the .erb. I have created a repo to demo how to properly set up react-rails in your project. And to handle the search/filter functionality, check out this commit.

In a nutshell,

1. Ensure you're passing the correct name of the component onto react_components. In my case, I passed App as the main component. See here.
2. Ensure all components are exported automatically. In this case, use react_ujs as shown here. My components folder name is components that is why I'm using const componentRequireContext = require.context('components', true);

Answer 2

on the element try using onInput instead of the onChange tag this might work the way you want it.