title: why use state is not working in react + javascript?
body: <p>I am trying to use react component in my <code>HTML</code> &amp; javascript .So What i do I compile my react component by webpack and create a bundle file in UMD. it is working fine when I create a <code>Hello world</code> example.</p>
  <p>It is working fine in below example without using state.
  here is working example</p>
  <p><a href="https://jsbin.com/paduyarase/edit?html,output" rel="nofollow noreferrer">https://jsbin.com/paduyarase/edit?html,output</a></p>
  <p>Now I introduce usestate in my component .I compiled below function and use is javascript it is not working.</p>
  <pre><code>import React from 'react';
  
  const Index = () =&gt; {
      const [state,setState] = React.useState(0)
    return (
        &lt;div&gt;
          hello World {state}
        &lt;/div&gt;
    );
  };
  
  export default Index;
  </code></pre>
  <p>This component is not working
  <a href="https://jsbin.com/hefiretaru/edit?html,output" rel="nofollow noreferrer">https://jsbin.com/hefiretaru/edit?html,output</a></p>
  <p>getting error</p>
  <p><strong>error Error: Minified React error #321; visit <a href="https://reactjs.org/docs/error-decoder.html?invariant=321" rel="nofollow noreferrer">https://reactjs.org/docs/error-decoder.html?invariant=321</a> for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
  at L (:10:4000)
  at Object.useState (:10:5366)
  at t.default (:2:1777)
  at renderWithHooks (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:15015:20)
  at mountIndeterminateComponent (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:17841:15)
  at beginWork (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:19079:18)
  at HTMLUnknownElement.callCallback (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:3942:16)
  at Object.invokeGuardedCallbackDev (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:3991:18)
  at invokeGuardedCallback (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:4053:33)
  at beginWork$1 (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:23994:9)
  VM178:10 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
  at L (:10:4000)
  at Object.useState (:10:5366)
  at t.default (:2:1777)
  at renderWithHooks (VM165 react-dom.development.js:15015)</strong></p>
  <p><strong>code</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;script src=&quot;https://unpkg.com/react@17.0.1/umd/react.development.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js&quot;&gt;&lt;/script&gt;
     &lt;script&gt;
       !function(e,t){&quot;object&quot;==typeof exports&amp;&amp;&quot;object&quot;==typeof module?module.exports=t():&quot;function&quot;==typeof define&amp;&amp;define.amd?define([],t):&quot;object&quot;==typeof exports?exports.MyCom=t():e.MyCom=t()}(window,(function(){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){&quot;undefined&quot;!=typeof Symbol&amp;&amp;Symbol.toStringTag&amp;&amp;Object.defineProperty(e,Symbol.toStringTag,{value:&quot;Module&quot;}),Object.defineProperty(e,&quot;__esModule&quot;,{value:!0})},r.t=function(e,t){if(1&amp;t&amp;&amp;(e=r(e)),8&amp;t)return e;if(4&amp;t&amp;&amp;&quot;object&quot;==typeof e&amp;&amp;e&amp;&amp;e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,&quot;default&quot;,{enumerable:!0,value:e}),2&amp;t&amp;&amp;&quot;string&quot;!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&amp;&amp;e.__esModule?function(){return e.default}:function(){return e};return r.d(t,&quot;a&quot;,t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p=&quot;&quot;,r(r.s=1)}([function(e,t,r){&quot;use strict&quot;;e.exports=r(2)},function(e,t,r){&quot;use strict&quot;;r.r(t);var n=r(0),o=r.n(n);function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||&quot;[object Arguments]&quot;===Object.prototype.toString.call(e)))return;var r=[],n=!0,o=!1,u=void 0;try{for(var c,f=e[Symbol.iterator]();!(n=(c=f.next()).done)&amp;&amp;(r.push(c.value),!t||r.length!==t);n=!0);}catch(e){o=!0,u=e}finally{try{n||null==f.return||f.return()}finally{if(o)throw u}}return r}(e,t)||function(){throw new TypeError(&quot;Invalid attempt to destructure non-iterable instance&quot;)}()}t.default=function(){var e=u(o.a.useState(0),2),t=e[0];e[1];return o.a.createElement(&quot;div&quot;,null,&quot;hello World &quot;,t)}},function(e,t,r){&quot;use strict&quot;;
  /** @license React v16.12.0
   * react.production.min.js
   *
   * Copyright (c) Facebook, Inc. and its affiliates.
   *
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
   */var n=r(3),o=&quot;function&quot;==typeof Symbol&amp;&amp;Symbol.for,u=o?Symbol.for(&quot;react.element&quot;):60103,c=o?Symbol.for(&quot;react.portal&quot;):60106,f=o?Symbol.for(&quot;react.fragment&quot;):60107,l=o?Symbol.for(&quot;react.strict_mode&quot;):60108,i=o?Symbol.for(&quot;react.profiler&quot;):60114,a=o?Symbol.for(&quot;react.provider&quot;):60109,s=o?Symbol.for(&quot;react.context&quot;):60110,p=o?Symbol.for(&quot;react.forward_ref&quot;):60112,y=o?Symbol.for(&quot;react.suspense&quot;):60113;o&amp;&amp;Symbol.for(&quot;react.suspense_list&quot;);var d=o?Symbol.for(&quot;react.memo&quot;):60115,b=o?Symbol.for(&quot;react.lazy&quot;):60116;o&amp;&amp;Symbol.for(&quot;react.fundamental&quot;),o&amp;&amp;Symbol.for(&quot;react.responder&quot;),o&amp;&amp;Symbol.for(&quot;react.scope&quot;);var m=&quot;function&quot;==typeof Symbol&amp;&amp;Symbol.iterator;function v(e){for(var t=&quot;https://reactjs.org/docs/error-decoder.html?invariant=&quot;+e,r=1;r&lt;arguments.length;r++)t+=&quot;&amp;args[]=&quot;+encodeURIComponent(arguments[r]);return&quot;Minified React error #&quot;+e+&quot;; visit &quot;+t+&quot; for the full message or use the non-minified dev environment for full errors and additional helpful warnings.&quot;}var h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},S={};function g(e,t,r){this.props=e,this.context=t,this.refs=S,this.updater=r||h}function j(){}function _(e,t,r){this.props=e,this.context=t,this.refs=S,this.updater=r||h}g.prototype.isReactComponent={},g.prototype.setState=function(e,t){if(&quot;object&quot;!=typeof e&amp;&amp;&quot;function&quot;!=typeof e&amp;&amp;null!=e)throw Error(v(85));this.updater.enqueueSetState(this,e,t,&quot;setState&quot;)},g.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,&quot;forceUpdate&quot;)},j.prototype=g.prototype;var O=_.prototype=new j;O.constructor=_,n(O,g.prototype),O.isPureReactComponent=!0;var w={current:null},x={current:null},k=Object.prototype.hasOwnProperty,P={key:!0,ref:!0,__self:!0,__source:!0};function C(e,t,r){var n,o={},c=null,f=null;if(null!=t)for(n in void 0!==t.ref&amp;&amp;(f=t.ref),void 0!==t.key&amp;&amp;(c=&quot;&quot;+t.key),t)k.call(t,n)&amp;&amp;!P.hasOwnProperty(n)&amp;&amp;(o[n]=t[n]);var l=arguments.length-2;if(1===l)o.children=r;else if(1&lt;l){for(var i=Array(l),a=0;a&lt;l;a++)i[a]=arguments[a+2];o.children=i}if(e&amp;&amp;e.defaultProps)for(n in l=e.defaultProps)void 0===o[n]&amp;&amp;(o[n]=l[n]);return{$$typeof:u,type:e,key:c,ref:f,props:o,_owner:x.current}}function E(e){return&quot;object&quot;==typeof e&amp;&amp;null!==e&amp;&amp;e.$$typeof===u}var $=/\/+/g,R=[];function A(e,t,r,n){if(R.length){var o=R.pop();return o.result=e,o.keyPrefix=t,o.func=r,o.context=n,o.count=0,o}return{result:e,keyPrefix:t,func:r,context:n,count:0}}function M(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10&gt;R.length&amp;&amp;R.push(e)}function I(e,t,r){return null==e?0:function e(t,r,n,o){var f=typeof t;&quot;undefined&quot;!==f&amp;&amp;&quot;boolean&quot;!==f||(t=null);var l=!1;if(null===t)l=!0;else switch(f){case&quot;string&quot;:case&quot;number&quot;:l=!0;break;case&quot;object&quot;:switch(t.$$typeof){case u:case c:l=!0}}if(l)return n(o,t,&quot;&quot;===r?&quot;.&quot;+q(t,0):r),1;if(l=0,r=&quot;&quot;===r?&quot;.&quot;:r+&quot;:&quot;,Array.isArray(t))for(var i=0;i&lt;t.length;i++){var a=r+q(f=t[i],i);l+=e(f,a,n,o)}else if(null===t||&quot;object&quot;!=typeof t?a=null:a=&quot;function&quot;==typeof(a=m&amp;&amp;t[m]||t[&quot;@@iterator&quot;])?a:null,&quot;function&quot;==typeof a)for(t=a.call(t),i=0;!(f=t.next()).done;)l+=e(f=f.value,a=r+q(f,i++),n,o);else if(&quot;object&quot;===f)throw n=&quot;&quot;+t,Error(v(31,&quot;[object Object]&quot;===n?&quot;object with keys {&quot;+Object.keys(t).join(&quot;, &quot;)+&quot;}&quot;:n,&quot;&quot;));return l}(e,&quot;&quot;,t,r)}function q(e,t){return&quot;object&quot;==typeof e&amp;&amp;null!==e&amp;&amp;null!=e.key?function(e){var t={&quot;=&quot;:&quot;=0&quot;,&quot;:&quot;:&quot;=2&quot;};return&quot;$&quot;+(&quot;&quot;+e).replace(/[=:]/g,(function(e){return t[e]}))}(e.key):t.toString(36)}function T(e,t){e.func.call(e.context,t,e.count++)}function U(e,t,r){var n=e.result,o=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?F(e,n,r,(function(e){return e})):null!=e&amp;&amp;(E(e)&amp;&amp;(e=function(e,t){return{$$typeof:u,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,o+(!e.key||t&amp;&amp;t.key===e.key?&quot;&quot;:(&quot;&quot;+e.key).replace($,&quot;$&amp;/&quot;)+&quot;/&quot;)+r)),n.push(e))}function F(e,t,r,n,o){var u=&quot;&quot;;null!=r&amp;&amp;(u=(&quot;&quot;+r).replace($,&quot;$&amp;/&quot;)+&quot;/&quot;),I(e,U,t=A(t,u,n,o)),M(t)}function L(){var e=w.current;if(null===e)throw Error(v(321));return e}var N={Children:{map:function(e,t,r){if(null==e)return e;var n=[];return F(e,n,null,t,r),n},forEach:function(e,t,r){if(null==e)return e;I(e,T,t=A(null,null,t,r)),M(t)},count:function(e){return I(e,(function(){return null}),null)},toArray:function(e){var t=[];return F(e,t,null,(function(e){return e})),t},only:function(e){if(!E(e))throw Error(v(143));return e}},createRef:function(){return{current:null}},Component:g,PureComponent:_,createContext:function(e,t){return void 0===t&amp;&amp;(t=null),(e={$$typeof:s,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:a,_context:e},e.Consumer=e},forwardRef:function(e){return{$$typeof:p,render:e}},lazy:function(e){return{$$typeof:b,_ctor:e,_status:-1,_result:null}},memo:function(e,t){return{$$typeof:d,type:e,compare:void 0===t?null:t}},useCallback:function(e,t){return L().useCallback(e,t)},useContext:function(e,t){return L().useContext(e,t)},useEffect:function(e,t){return L().useEffect(e,t)},useImperativeHandle:function(e,t,r){return L().useImperativeHandle(e,t,r)},useDebugValue:function(){},useLayoutEffect:function(e,t){return L().useLayoutEffect(e,t)},useMemo:function(e,t){return L().useMemo(e,t)},useReducer:function(e,t,r){return L().useReducer(e,t,r)},useRef:function(e){return L().useRef(e)},useState:function(e){return L().useState(e)},Fragment:f,Profiler:i,StrictMode:l,Suspense:y,createElement:C,cloneElement:function(e,t,r){if(null==e)throw Error(v(267,e));var o=n({},e.props),c=e.key,f=e.ref,l=e._owner;if(null!=t){if(void 0!==t.ref&amp;&amp;(f=t.ref,l=x.current),void 0!==t.key&amp;&amp;(c=&quot;&quot;+t.key),e.type&amp;&amp;e.type.defaultProps)var i=e.type.defaultProps;for(a in t)k.call(t,a)&amp;&amp;!P.hasOwnProperty(a)&amp;&amp;(o[a]=void 0===t[a]&amp;&amp;void 0!==i?i[a]:t[a])}var a=arguments.length-2;if(1===a)o.children=r;else if(1&lt;a){i=Array(a);for(var s=0;s&lt;a;s++)i[s]=arguments[s+2];o.children=i}return{$$typeof:u,type:e.type,key:c,ref:f,props:o,_owner:l}},createFactory:function(e){var t=C.bind(null,e);return t.type=e,t},isValidElement:E,version:&quot;16.12.0&quot;,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentDispatcher:w,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:x,IsSomeRendererActing:{current:!1},assign:n}},D={default:N},V=D&amp;&amp;N||D;e.exports=V.default||V},function(e,t,r){&quot;use strict&quot;;
  /*
  object-assign
  (c) Sindre Sorhus
  @license MIT
  */var n=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;function c(e){if(null==e)throw new TypeError(&quot;Object.assign cannot be called with null or undefined&quot;);return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String(&quot;abc&quot;);if(e[5]=&quot;de&quot;,&quot;5&quot;===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r&lt;10;r++)t[&quot;_&quot;+String.fromCharCode(r)]=r;if(&quot;0123456789&quot;!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(&quot;&quot;))return!1;var n={};return&quot;abcdefghijklmnopqrst&quot;.split(&quot;&quot;).forEach((function(e){n[e]=e})),&quot;abcdefghijklmnopqrst&quot;===Object.keys(Object.assign({},n)).join(&quot;&quot;)}catch(e){return!1}}()?Object.assign:function(e,t){for(var r,f,l=c(e),i=1;i&lt;arguments.length;i++){for(var a in r=Object(arguments[i]))o.call(r,a)&amp;&amp;(l[a]=r[a]);if(n){f=n(r);for(var s=0;s&lt;f.length;s++)u.call(r,f[s])&amp;&amp;(l[f[s]]=r[f[s]])}}return l}}])}));
    &lt;/script&gt;
      &lt;title&gt;React App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
      &lt;script&gt;
          ReactDOM.render(
            React.createElement(MyCom.default),
            document.getElementById('root')
          );
        &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
       
  </code></pre>