Invalid hook calls in react.js application

Question

Having this error when running the program:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same ap

import React,  { Component } from "react";
import {useEffect,useState}  from "react";
import ReactDOM from 'react-dom'; 
const App = () => {
const APP_ID = "";
const APP_KEY = "";
const exapmle = "https://api.edamam.com/search? 
q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}";
  useEffect(()=>{
  console.log("effect has been");
  }); 

const [counter,setCounter] = useState(0);
return (
<div>
  <h1>hello world</h1>
  <form classname="search-form">
    <input classname="search_bar" type="text"></input>
    <button classname="search-button" type="submit">Search</button>
  </form>
  <h1 onClick = {()=> setCounter(counter+1)}> {counter}</h1>
</div>);};
export default App();

Added code formatting and fixed minor grammar to make the question clearer. — craigcaulfield, Sep 03 '19 at 12:08

It'sNotMe · Answer 1 · 2019-10-19T04:41:17.610

Try export default App instead of export default App().

I made a few other tweaks you can test in CodeSandbox, namely:

Using backticks to embed template literals in example
Limiting useEffect to a single execution by adding a second argument of []

import React from 'react';
import { useEffect, useState } from 'react';
const App = () => {
  const APP_ID = '';
  const APP_KEY = '';
  const example = `https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}`;
  useEffect(() => {
    console.log('useEffect will run once if I pass it a second argument of []');
    console.log(example);
    // eslint-disable-next-line
  }, []);

  const [counter, setCounter] = useState(0);
  return (
    <div>
      <h1>hello world</h1>
      <form className='search-form'>
        <input className='search_bar' type='text'></input>
        <button className='search-button' type='submit'>
          Search
        </button>
      </form>
      <h1 onClick={() => setCounter(counter + 1)}> {counter}</h1>
    </div>
  );
};
export default App;

Invalid hook calls in react.js application

1 Answers1