title: `Invalid hook call react`
body: <ul>
  <li><p>I am new to React and Now I would like to show some record in the
  table and now I got this error. Help me, please.</p>
  <p>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 app
  See for tips about how to debug and fix this problem</p>
  <pre><code> import &quot;./App.css&quot;;
   import { Container } from &quot;semantic-ui-react&quot;;
   import MainHeader from &quot;./components/MainHeader&quot;;
   import NewEntryForm from &quot;./components/NewEntryForm&quot;;
   import DisplayBalance from &quot;./components/DisplayBalance&quot;;
   import DisplayBalances from &quot;./components/DisplayBalances&quot;;
   import EntryLiness from &quot;./components/EntryLiness&quot;;
   import { useState } from &quot;react&quot;;
   import ModalEdit from &quot;./components/ModelEdit&quot;;
   import { createStore } from &quot;redux&quot;;
  
   function App() {
     const [entries, setEntries] = useState(initialEntries);
     const [description, setDescription] = useState(&quot;&quot;);
     const [value, setValue] = useState(&quot;&quot;);
     const [isExpense, setIsExpense] = useState(true);
     const [isOpen, setIsOpen] = useState(false);
  
     function deleteEntry(id) {
       const result = entries.filter((entry) =&gt; entry.id !== id);
       setEntries(result);
     }
     function editEntry(id) {
       if (id) {
         setIsOpen(true);
       }
     }
  
     const store = createStore((state = initialEntries) =&gt; {
       return state;
     });
  
     function addEntry(description, value, isExpense) {
       const result = entries.concat({
         id: entries.length + 1,
         description,
         value,
         isExpense,
       });
       setEntries(result);
     }
  
     return (
       &lt;Container&gt;
         &lt;MainHeader type=&quot;h1&quot; title=&quot;Budget&quot; /&gt;
         &lt;DisplayBalance size=&quot;small&quot; value=&quot;2,424.0&quot; title=&quot;Your Balance&quot; /&gt;
         &lt;DisplayBalances /&gt;
         &lt;MainHeader type=&quot;h3&quot; title=&quot;History: &quot; /&gt;
         &lt;EntryLiness
           entries={entries}
           deleteEntry={deleteEntry}
           editEntry={editEntry}
         /&gt;
         &lt;MainHeader type=&quot;h3&quot; title=&quot;Add new transaction: &quot; /&gt;
         &lt;NewEntryForm
           addEntry={addEntry}
           value={value}
           setValue={setValue}
           description={description}
           setDescription={setDescription}
           isExpense={isExpense}
           setIsExpense={setIsExpense}
         /&gt;
         &lt;ModalEdit isOpen={isOpen} setIsOpen={setIsOpen} /&gt;
       &lt;/Container&gt;
     );
   }
  
   export default App;
  
   var initialEntries = [
     {
       id: 1,
       description: &quot;Work incom&quot;,
       value: &quot;1000$&quot;,
       isExpense: false,
     },
     { id: 2, description: &quot;Water incom&quot;, value: &quot;100$&quot;, isExpense: true },
     { id: 3, description: &quot;drink incom&quot;, value: &quot;4000$&quot;, isExpense: false },
     { id: 4, description: &quot;holla incom&quot;, value: &quot;1000$&quot;, isExpense: true },
     { id: 5, description: &quot;danger incom&quot;, value: &quot;600$&quot;, isExpense: false },
     { id: 6, description: &quot;Work incom&quot;, value: &quot;859$&quot;, isExpense: true },
   ];
  </code></pre>
  </li>
  </ul>