<p dir="auto">Hi all, I am new to react and  I am trying to create a react library of components and I came across this problem because one of the components I am creating uses <a href="https://reactjs.org/docs/hooks-intro.html" rel="nofollow">REACT HOOKS</a>.</p>
<p dir="auto"><strong>Disclaimer: this is my first time creating an issue, so please bear with me.</strong></p>
<p dir="auto">So I am trying to create an accordion component which toggles between these classes <code class="notranslate">accordion__item--open</code> and <code class="notranslate">accordion__item</code> to open and close.</p>
<p dir="auto"><strong>package.json</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;name&quot;: &quot;react-lib&quot;,
  &quot;version&quot;: &quot;0.3.0&quot;,
  &quot;description&quot;: &quot;A simple UI library of react components&quot;,
  &quot;main&quot;: &quot;dist/index.js&quot;,
  &quot;publishConfig&quot;: {
    &quot;registry&quot;: &quot;&quot;
  },
  &quot;scripts&quot;: {
    &quot;login&quot;: &quot;&quot;,
    &quot;build&quot;: &quot;webpack --mode=production&quot;,
    &quot;develop&quot;: &quot;webpack --mode=development --watch&quot;
  },
  &quot;repository&quot;: {
    &quot;type&quot;: &quot;git&quot;,
    &quot;url&quot;: &quot;&quot;
  },
  &quot;keywords&quot;: [],
  &quot;author&quot;: &quot;&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;homepage&quot;: &quot;&quot;,
  &quot;dependencies&quot;: {
    &quot;@babel/core&quot;: &quot;^7.3.4&quot;,
    &quot;@babel/preset-env&quot;: &quot;^7.3.4&quot;,
    &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;,
    &quot;babel-loader&quot;: &quot;^8.0.5&quot;,
    &quot;eslint&quot;: &quot;^5.15.1&quot;,
    &quot;eslint-loader&quot;: &quot;^2.1.2&quot;,
    &quot;webpack&quot;: &quot;^4.29.6&quot;,
    &quot;webpack-cli&quot;: &quot;^3.2.3&quot;,
    &quot;webpack-node-externals&quot;: &quot;^1.7.2&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;eslint-config-airbnb&quot;: &quot;^17.1.0&quot;,
    &quot;eslint-plugin-import&quot;: &quot;^2.16.0&quot;,
    &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.2.1&quot;,
    &quot;eslint-plugin-react&quot;: &quot;^7.12.4&quot;,
    &quot;eslint-plugin-react-hooks&quot;: &quot;^1.6.0&quot;
  }
}"><pre class="notranslate"><code class="notranslate">{
  "name": "react-lib",
  "version": "0.3.0",
  "description": "A simple UI library of react components",
  "main": "dist/index.js",
  "publishConfig": {
    "registry": ""
  },
  "scripts": {
    "login": "",
    "build": "webpack --mode=production",
    "develop": "webpack --mode=development --watch"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": "",
  "dependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "eslint": "^5.15.1",
    "eslint-loader": "^2.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-node-externals": "^1.7.2"
  },
  "devDependencies": {
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-hooks": "^1.6.0"
  }
}
</code></pre></div>
<p dir="auto"><strong>webpack.config.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const path = require('path');
const webpack = require('webpack');

module.exports =  {

  mode: 'development',
  optimization: {
    minimize: true,
  },
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js',
    library: '',
    libraryTarget: 'commonjs'
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/react']
        }
      }
    ]
  } 
};"><pre class="notranslate"><code class="notranslate">const path = require('path');
const webpack = require('webpack');

module.exports =  {

  mode: 'development',
  optimization: {
    minimize: true,
  },
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js',
    library: '',
    libraryTarget: 'commonjs'
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/react']
        }
      }
    ]
  } 
};
</code></pre></div>
<p dir="auto"><strong>This is the accordion container:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react'; 

function Accordion({ children }) {

 return (
   &lt;div className=&quot;accordion&quot;&gt;
     { children }
   &lt;/div&gt;
 ); 

}

export default Accordion;
"><pre class="notranslate"><code class="notranslate">import React from 'react'; 

function Accordion({ children }) {

 return (
   &lt;div className="accordion"&gt;
     { children }
   &lt;/div&gt;
 ); 

}

export default Accordion;

</code></pre></div>
<p dir="auto"><strong>This is the accordion item that will live inside the container:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { useState } from 'react'; 

function AccordionItem({header, content}) { 

const [ isActive, toggleActive ] = useState(false);
  
return (
    &lt;div className={ `accordion__item ${ isActive ? 'accordion__item--open' : '' }` }&gt;

      &lt;button
        className=&quot;accordion__item-header&quot;
        onClick={ () =&gt; isActive ? toggleActive(false) : toggleActive(true) }
      &gt;
       { header }
       &lt;svg className=&quot;icon icon--debit&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 50 50&quot;&gt;
         &lt;path className=&quot;icon__path&quot; d=&quot;M22.37,22.33V2.67a2.63,2.63,0,0,1,5.26,0V47.24a2.63,2.63,0,0,1-5.26.09V27.58H2.71a2.63,2.63,0,0,1,0-5.25Zm11.92,5.25a2.63,2.63,0,0,1,0-5.25h13a2.63,2.63,0,0,1,0,5.25Z&quot;&gt;
         &lt;/path&gt;
       &lt;/svg&gt;
     &lt;/button&gt;

     &lt;div className=&quot;accordion__item-content&quot;&gt;
       { children }
     &lt;/div&gt;

   &lt;/div&gt;
 )

};

export default AccordionItem;
"><pre class="notranslate"><code class="notranslate">import React, { useState } from 'react'; 

function AccordionItem({header, content}) { 

const [ isActive, toggleActive ] = useState(false);
  
return (
    &lt;div className={ `accordion__item ${ isActive ? 'accordion__item--open' : '' }` }&gt;

      &lt;button
        className="accordion__item-header"
        onClick={ () =&gt; isActive ? toggleActive(false) : toggleActive(true) }
      &gt;
       { header }
       &lt;svg className="icon icon--debit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"&gt;
         &lt;path className="icon__path" d="M22.37,22.33V2.67a2.63,2.63,0,0,1,5.26,0V47.24a2.63,2.63,0,0,1-5.26.09V27.58H2.71a2.63,2.63,0,0,1,0-5.25Zm11.92,5.25a2.63,2.63,0,0,1,0-5.25h13a2.63,2.63,0,0,1,0,5.25Z"&gt;
         &lt;/path&gt;
       &lt;/svg&gt;
     &lt;/button&gt;

     &lt;div className="accordion__item-content"&gt;
       { children }
     &lt;/div&gt;

   &lt;/div&gt;
 )

};

export default AccordionItem;

</code></pre></div>
<p dir="auto">Now inside of a <a href="https://github.com/sethandleah/myapp">create-react-app</a> I import these components</p>
<p dir="auto">My <a href="https://github.com/sethandleah/react-lib">library</a> and the <a href="https://github.com/sethandleah/myapp">create-react-app</a> are relative to each other and I am using <code class="notranslate">npm link</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react'; 

import {AccordionItem} from 'react-lib'
import {Accordion} from 'react-lib';

function App ({props}) {

  return (
    
      &lt;Accordion&gt;
        &lt;AccordionItem header={&quot;Hello&quot;} content={&quot;World&quot;}/&gt;
      &lt;/Accordion&gt; 
  )

}

export default App;"><pre class="notranslate"><code class="notranslate">import React from 'react'; 

import {AccordionItem} from 'react-lib'
import {Accordion} from 'react-lib';

function App ({props}) {

  return (
    
      &lt;Accordion&gt;
        &lt;AccordionItem header={"Hello"} content={"World"}/&gt;
      &lt;/Accordion&gt; 
  )

}

export default App;
</code></pre></div>
<p dir="auto">I have followed all of these <a href="https://reactjs.org/warnings/invalid-hook-call-warning.html" rel="nofollow">instructions</a> and I still get the same error.</p>
<p dir="auto"><strong>Current behavior?</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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 https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem."><pre class="notranslate"><code class="notranslate">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 https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
</code></pre></div>
<p dir="auto"><strong>Steps to reproduce</strong></p>
<ul dir="auto">
<li>clone <a href="https://github.com/sethandleah/react-lib">https://github.com/sethandleah/react-lib</a></li>
<li>clone <a href="https://github.com/sethandleah/myapp">https://github.com/sethandleah/myapp</a></li>
<li><code class="notranslate">cd react-lib</code></li>
<li><code class="notranslate">npm install</code></li>
<li><code class="notranslate">npm link</code></li>
<li><code class="notranslate">cd ../myapp</code></li>
<li><code class="notranslate">npm i</code></li>
<li><code class="notranslate">npm link react-lib</code></li>
<li><code class="notranslate">npm start</code></li>
</ul>
<p dir="auto"><strong>Expected behavior</strong></p>
<ul dir="auto">
<li>It should show a button with a "plus" svg sign and the words "Hello" and "World" respectively</li>
<li>Open devtools and go to elements</li>
<li>When clicking on the button the class <code class="notranslate">accordion_item--open</code> should toggle</li>
</ul>
<p dir="auto"><strong>To see the above, do the following:</strong></p>
<ul dir="auto">
<li>Uncomment these lines at <code class="notranslate">myapp/src/App.js</code></li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Accordion  from './Accordion';
import AccordionItem from './AccordionItem';"><pre class="notranslate"><code class="notranslate">import Accordion  from './Accordion';
import AccordionItem from './AccordionItem';
</code></pre></div>
<ul dir="auto">
<li>The comment out these line, alse at <code class="notranslate">myapp/src/App.js</code>:</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { Accordion } from 'react-lib';
import { AccordionItem } from 'react-lib';"><pre class="notranslate"><code class="notranslate">import { Accordion } from 'react-lib';
import { AccordionItem } from 'react-lib';
</code></pre></div>
<p dir="auto"><strong>Versions of React, Browser / OS are affected by this issue:</strong></p>
<ul dir="auto">
<li>React and React-Dom: both are <code class="notranslate">^16.8.6</code> on  both <a href="https://github.com/sethandleah/react-lib">react-lib</a> and the <a href="https://github.com/sethandleah/myapp">myapp</a></li>
<li>Browser: Brave <code class="notranslate">Version 0.61.52 Chromium: 73.0.3683.86 (Official Build) (64-bit)</code></li>
<li>OS: MacOS High Siera <code class="notranslate"> Version 10.13.6 (17G5019)</code></li>
</ul>
<p dir="auto">on the MDN site <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code</a></p>
<p dir="auto">Mozilla is saying Event.code is the new way to distinguish which button a user is pressing, having to pull this off of the native event is a pain, and since this is the new standard, it'd be nice to have it on React's synthetic events.</p>