0

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?

2
  • 2
    Move request from constructor to componentDidMount Commented Jul 31, 2018 at 11:26
  • Thanks Leo. It works Commented Jul 31, 2018 at 11:39

1 Answer 1

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;
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.