Integration in React with Ruby on Rails. - ruby-on-rails

Question

I was following the instructions from a tutorial about integrating React with Ruby on Rails. I installed webpack 'webpacker', 'haml' and 'ransack'. All my backend code is working right now.
I created a view to point to my jsx files. On a Hello World attempt, the jsx its correctly rendered. My problem is after that.
I created a JobOffers.jsx file. So, on my dashboard file i pointed to this other one.
This is my dashboard.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import JobOffers from './JobOffers'
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<JobOffers/>
)
})
And this is my JobOffer.jsx
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class JobOffers extends Component {
constructor(props) {
super(props);
this.state = {
term: '',
autoCompleteResults: [],
itemSelected: {},
showItemSelected: false
};
$.getJSON('/search?q=' + this.state.term)
.then(response => this.setState({ autoCompleteResults: response.items }))
}
getAutoCompleteResults(e){
this.setState({
term: e.target.value
}, () => {
$.getJSON('/search?q=' + this.state.term)
.then(response => this.setState({ autoCompleteResults: response.items }))
});
}
render(){
let autoCompleteList = this.state.autoCompleteResults.map((response, index) => {
return <div key={index}>
<h2>{response.title}</h2>
<p>{response.description }</p>
</div>
});
return (
<div>
<input ref={ (input) => { this.searchBar = input } } value={ this.state.term } onChange={ this.getAutoCompleteResults.bind(this) } type='text' placeholder='Search...' />
{ autoCompleteList }
</div>
)
}
}
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<JobOffers />,
document.body.appendChild(document.createElement('div')),
)
});
export default JobOffers;
When I go to the page, it renders for less then one second the right input, and then disappears. Anyone know what Im doing wrong here?

Answer 1

dashboard.jsx:
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import JobOffers from './JobOffers'
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<JobOffers/>,
document.body.appendChild(document.createElement('div')),
)
})
JobOffers.jsx:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class JobOffers extends Component {
constructor(props) {
super(props);
this.state = {
term: '',
autoCompleteResults: [],
itemSelected: {},
showItemSelected: false
};
}
componentDidMount() {
$.getJSON('/search?q=' + this.state.term)
.then(response => this.setState({ autoCompleteResults: response.items }))
}
getAutoCompleteResults(e){
this.setState({
term: e.target.value
}, () => {
$.getJSON('/search?q=' + this.state.term)
.then(response => this.setState({ autoCompleteResults: response.items }))
});
}
render(){
let autoCompleteList = this.state.autoCompleteResults.map((response, index) => {
return <div key={index}>
<h2>{response.title}</h2>
<p>{response.description }</p>
</div>
});
return (
<div>
<input ref={ (input) => { this.searchBar = input } } value={ this.state.term } onChange={ this.getAutoCompleteResults.bind(this) } type='text' placeholder='Search...' />
{ autoCompleteList }
</div>
)
}
}
export default JobOffers;