0

I'm using react on my Ruby on Rails project and i caught error Uncaught Error: Invalid hook call. I'm using gem react-on-rails. My component code:


const DimaSearch = () => {

  const [searchObject, setSearchObject] = useState("")
  
  useEffect(() => {
    fetch(
      `/api/v1/search_objects?search=${searchObject}`
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      });
  }, [searchObject]);

  const handleOnChange = (event) => {
    event.preventDefault()
    setSearchObject(event.target.value)
  }

  return (
    <div className="container justify-content-center">
      <div className="row">
        <div className="col-md-8">
            <div className="input-group mb-3">
              <input 
              type="text" 
              className="form-control input-text"
              placeholder="Search..."
              onChange={(event) => handleOnChange(event)}
              />
            <div className="input-group-append">
              <button className="btn btn-outline-primary btn-lg" type="button">
                <i className="fa fa-search"></i>
              </button>
            </div>
            </div>
        </div>
      </div>
    </div>
  )
}

export default DimaSearch

index.html.slim, where I import component:

= react_component("DimaSearch")

I've already read about hook usage and literally don't know what I should do.

dimko
  • 1
  • Are you sure this is the component that raises the error? I don't see anything wrong with it. Did you read https://reactjs.org/warnings/invalid-hook-call-warning.html ? – razvans Jul 15 '21 at 11:52
  • Yes, I did. The solution for me was to render functional compotent in the class component and then render the last one in the view. Seems like react-on-rails has bug with rendering functional components on views. – dimko Jul 15 '21 at 17:56

1 Answers1

0

The solution for me was to render functional compotent in the class component and then render the last one in the view. Seems like react-on-rails has bug with rendering functional components on views.

dimko
  • 1