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

Your code works may the problem is how do you calls this code with react_component. Try to do other action in your funciton, like a alert or a redirect. I don't know how this react_component works but could be a limitation. — Gabriel Ferrari, Sep 17 '20 at 17:28

score 1 · Answer 1 · answered Sep 17 '20 at 17:26

1

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

answered Sep 17 '20 at 17:26

Adarsh

428
5
16

try removing `this.handleChange = this.handleChange.bind(this);` cuz it looks kind of unnecessary – Adarsh Sep 18 '20 at 16:54
no changes removing `this.handleChange = this.handleChange.bind(this);` – Gotey Sep 19 '20 at 13:32
instead of `this.handleChange = this.handleChange.bind(this); ` try doing `this.handleChange = event => {console.log('change was made')} ` – Adarsh Sep 19 '20 at 16:58
I have tried and sitll not working. I am thinking it could be related with the fact I am adding the component with the react_component helper, and the prerender option set to true. https://github.com/reactjs/react-rails#view-helper – Gotey Sep 19 '20 at 17:05

score 1 · Accepted Answer · answered Sep 21 '20 at 07:32

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,

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.
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);

So it is finally working after adding ` <%= javascript_pack_tag 'application' %>` in the correct layout of the application (since it had a few and I did only add that on the application.html.erb one). The main thing would have been that the console was not prompting the `Hello World from Webpacker` message, once I added the javascript_pack_tag in the correct place it was shown — Gotey, Sep 21 '20 at 09:29

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

2 Answers2