You probably want to configure the [react/jsx-filename-extension][1] rule in your `.eslintrc.js` so that ESLint is happy about JSX inside your TypeScript files:

```
rules:  {
  &#39;react/jsx-filename-extension&#39;: [2, { &#39;extensions&#39;: [&#39;.js&#39;, &#39;.jsx&#39;, &#39;.ts&#39;, &#39;.tsx&#39;] }],
},
```


  [1]: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md

Add this rule under the rules section of your eslint configuration:

    &quot;rules&quot;: {
      &quot;react/jsx-filename-extension&quot;: [1, { &quot;extensions&quot;: [&quot;.tsx&quot;, &quot;.ts&quot;] }]
    }

I m building a flutter app with django rest-framework. The registration api is working fine in Postman but after some successful registration from the flutter app it is showing the above error. The request is been sent on https address.

Removed csrf. Nothing happens.

# Request: #

    var data = {&#39;email&#39;:signupemailidcontroller.text,
                &#39;password1&#39;:passwordcontroller.text,
                &#39;password2&#39;:confirmpasswordcontroller.text,
               };
            //http request here
            await http.post(websitesignupurl,
                            headers: headers,
                            body: json.encode(data))
              .then((onResponse){
                print(onResponse.body);
              }).catchError((onerror){
              	print(onerror.toString());
            });

# Output in Console: #
SocketException: OS Error: Connection refused, errno = 111

I Expect the response of this request to be a Json object containing the user and token.


SocketException: OS Error: Connection refused, errno = 111 in flutter using django backend

I was recently asked to export as a `.zip` file one of my projects on my Git repository.

I have actually never had to do this in the 4 years I have been using Git.

I would prefer an answer that is all done inside command line terminal.



How do I export my project as a .zip of git repository?

In `.tsx` file, why does eslint report:

&gt;JSX not allowed in files with extension &#39;.tsx&#39;eslint(react/jsx-filename-extension)

How can I update the eslint config can resolve this message:

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/mlcMI.png

JSX not allowed in files with extension &#39;.tsx&#39;eslint(react/jsx-filename-extension)

In <code>.tsx</code> file, why does eslint report:
>JSX not allowed in files with extension '.tsx'eslint(react/jsx-filename-extension)
How can I update the eslint config can resolve this message:
<a href="https://i.stack.imgur.com/mlcMI.png" target="_blank" rel="noopener noreferrer"><img src="https://i.stack.imgur.com/mlcMI.png" alt="enter image description here"></a>

is it possible to use a `function` as my React Component&#39;s state ?

example code here:

``` tsx
// typescript 
type OoopsFunction = () =&gt; void;

export function App() {
    const [ooops, setOoops] = React.useState&lt;OoopsFunction&gt;(
        () =&gt; console.log(&#39;default ooops&#39;)
    );

    return (
        &lt;div&gt;
            &lt;div onClick={ ooops }&gt;
                Show Ooops
            &lt;/div&gt;

            &lt;div onClick={() =&gt; {
                setOoops(() =&gt; console.log(&#39;other ooops&#39;))
            }}&gt;
                change oops
            &lt;/div&gt;
        &lt;/div&gt;
    )
}
```

but it doesn&#39;t works ... the `defaultOoops` will be invoked at very beginning, and when clicking `change oops`, the `otrher ooops` will be logged to console immediately not logging after clicking `Show Ooops` again.

why ?

is it possible for me to use a function as my component&#39;s state ? 

or else React has its special ways to process such `the function state` ? 

is it possible to React.useState(() =&gt; {}) in React?

I have a large typescript file that I&#39;ve inherited. The compiler has many complaints with this file, however it works just fine. 

I&#39;ll come back to it, but is there any way to suppress all warnings/errors in a specific file?

Ignore all errors in a typescript file

I&#39;ve got the &quot;Object is possibly null&quot; error many times and usually I use a safety &quot;if statement&quot; in case it returns null.

I&#39;ve got the following function: 


&lt;!-- language: lang-js --&gt;

    const ModalOverlay = (props: any[]) =&gt; {
      const overlayEl = useRef(null);
        useEffect(() =&gt; {
        overlayEl.current.focus();
        });
        return &lt;div {...props} ref={overlayEl} /&gt;;
      }

But `overlayEl.current` gets the error &quot;Object is not defined&quot;. So I&#39;ve tried:


&lt;!-- language: lang-js --&gt;

    if (!overlayEl) {
        return null
      } else {
        useEffect(() =&gt; {
        overlayEl.current.focus();
        });
        return &lt;div {...props} ref={overlayEl} /&gt;;
      }


Which didn&#39;t work. I&#39;ve tried also: 

&lt;!-- language: lang-js --&gt;

    overlay &amp;&amp; overlayEl.current.focus();

Any hints would be highly appreciated! Thanks



Typescript, how to pass &quot;Object is possibly null&quot; error?

I&#39;m trying to import `package.json` in my TypeScript application:

```ts
import packageJson from &#39;../package.json&#39;;
```

My `tsconfig.json` contains the following:
```json
{
  &quot;compilerOptions&quot;: {
    &quot;rootDir&quot;: &quot;./src/&quot;
    &quot;outDir&quot;: &quot;./dist/&quot;,
    &quot;baseUrl&quot;: &quot;.&quot;,
    &quot;resolveJsonModule&quot;: true
  }
}
```

The problem is that when I compile this, I get

&gt; `error TS6059: File &#39;/path/to/package.json&#39; is not under &#39;rootDir&#39; &#39;/path/to/app/src/&#39;. &#39;rootDir&#39; is expected to contain all source files.`

I&#39;m not sure I understand the issue, because both `./src/` and `/.dist` have the same parent `..`, so TypeScript could just leave alone the `import &#39;../package.json&#39;` and **it would work** from either `rootDir` or `outDir`.


Anyway, I&#39;ve tried the following, with unsatisfactory results:

* remove `rootDir` - compilation works, but the `dist` will contain `dist/src`, which I don&#39;t want
* remove `outDir` - then `src` gets polluted with `.js` files (and `.js.map` if `sourceMap` was true)
* add `@ts-ignore` - compilation stops the the file that imports `../package.json`

What&#39;s the workaround for this limitation, to keep generated files in `dist`, and allow importing from the parent directory of `rootDir`?


&#39;package.json&#39; is not under &#39;rootDir&#39;

```typescript
if (process.env.NODE_ENV !== &#39;production&#39;) {
    (WithUser as any).displayName = wrapDisplayName(Component, &#39;withUser&#39;);
}
```

I&#39;m not even sure if `as` is a keyword, but anyway, what does it do in JavaScript?

What does the &quot;as&quot; keyword do?

I installed `jest v24.7.1`in my project with:

    npm install jest -D

Then I start writing some test files, However I got these eslint errors:

    &#39;describe&#39; is not defined. eslint (no-undef)
    &#39;it&#39; is not defined. eslint (no-undef)
    &#39;expect&#39; is not defined. eslint (no-undef)

eslintrc.js:

    module.exports = {
  

    env: {
        browser: true,
        es6: true
      },
      extends: [&quot;airbnb&quot;, &quot;prettier&quot;, &quot;prettier/react&quot;],
      globals: {
        Atomics: &quot;readonly&quot;,
        SharedArrayBuffer: &quot;readonly&quot;
      },
      parserOptions: {
        ecmaFeatures: {
          jsx: true
        },
        ecmaVersion: 2018,
        sourceType: &quot;module&quot;
      },
      plugins: [&quot;react&quot;],
      rules: {}
    };

Should I add another rule or a plugin to fix this?




describe is not defined when installing jest

[`create-react-app` v3.0.0 is out](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md). It supports TypeScript linting internally. (That&#39;s nice!) I think I understand the situation where TSLint is on, and am planning to replace it with ESLint, but it is not right now.

How to disable that linting step in `react-scripts start`?


`/* eslint-disable */` and others are not the ones I&#39;m looking for.

Disable ESLint that create-react-app provides

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request:

```
./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: &#39;fetchBusinesses&#39;.
Either include it or remove the dependency array  react-hooks/exhaustive-deps
```

I&#39;ve been unable to find a solution that stops the infinite loop. I want to stay away from using `useReducer()`.  I did find this discussion *[\[ESLint\] Feedback for &#39;exhaustive-deps&#39; lint rule #14920][1]* where a possible solution is ```You can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you&#39;re doing.``` I&#39;m not confident in what I&#39;m doing, so I haven&#39;t tried implementing it just yet.

I have this current setup, *https://stackoverflow.com/questions/53243203/react-hook-useeffect-runs-continuously-forever-infinite-loop* and the only comment is about `useCallback()` which I&#39;m not familiar with.

How I&#39;m currently using `useEffect()` (which I only want to run once in the beginning similar to `componentDidMount()`):

```
useEffect(() =&gt; {
    fetchBusinesses();
  }, []);
```

```
const fetchBusinesses = () =&gt; {
    return fetch(&quot;theURL&quot;, {method: &quot;GET&quot;}
    )
      .then(res =&gt; normalizeResponseErrors(res))
      .then(res =&gt; {
        return res.json();
      })
      .then(rcvdBusinesses =&gt; {
        // some stuff
      })
      .catch(err =&gt; {
        // some error handling
      });
  };
```

  [1]: https://github.com/facebook/react/issues/14920




How to fix missing dependency warning when using useEffect React Hook

I&#39;m using Jest to write some specs and ESLint to lint the styling. 

For my `foo.spec.js` tests, eslint keeps throwing the following errors. It seems to think that `jest`, `beforeEach`, `afterEach`, etc... are not defined in that file. 



       11:1   error  &#39;beforeEach&#39; is not defined  no-undef
       12:3   error  &#39;jest&#39; is not defined        no-undef
       14:13  error  &#39;jest&#39; is not defined        no-undef
       18:1   error  &#39;afterEach&#39; is not defined   no-undef
       20:1   error  &#39;describe&#39; is not defined    no-undef
       21:3   error  &#39;it&#39; is not defined          no-undef
       25:5   error  &#39;expect&#39; is not defined      no-undef
       28:5   error  &#39;expect&#39; is not defined      no-undef
       31:5   error  &#39;expect&#39; is not defined      no-undef
       34:3   error  &#39;it&#39; is not defined          no-undef
       38:5   error  &#39;expect&#39; is not defined      no-undef
       41:5   error  &#39;jest&#39; is not defined        no-undef
       42:5   error  &#39;expect&#39; is not defined      no-undef
       43:5   error  &#39;expect&#39; is not defined      no-undef
       46:3   error  &#39;it&#39; is not defined          no-undef
       54:5   error  &#39;expect&#39; is not defined      no-undef
       58:5   error  &#39;jest&#39; is not defined        no-undef


I believe those are included by jest automatically and so they don&#39;t need to be explicitly imported in my spec files. In fact the only thing I import via my `jest.setup.js` file is

    import &quot;react-testing-library/cleanup-after-each&quot;;
    import &quot;jest-dom/extend-expect&quot;;

Is there a way to eliminate these errors without having to disable eslint rules at the top of each individual file or inline? 

Thanks!

eslint throws `no-undef` errors when linting Jest test files

I have list of dropdown options which user can select.

optinos in dropdown are made with tag: &lt; a href&gt;:

```
&lt;a onClick={() =&gt; handleSelect(filter)} role=&quot;button&quot;&gt;
   {filter.name}
&lt;/a&gt;
```

Problem is cus I must add `tabIndex=&quot;0&quot; or -1`, to fix error from Eslint. 

But When I add `tabIndex=0`, my button does not work anymore. 

Is there are any other way to fix this error?

This is how looks dropdown component:
```
&lt;ul name=&quot;filters&quot; className=&quot;dropdown&quot;&gt;
    {filterOptions.map((filter) =&gt; (
      &lt;li
        key={filter.id}
        defaultChecked={filter.name}
        name={filter.name}
        className={`option option-${filter.selected ? &#39;selected&#39; : &#39;unselected&#39;}`}
      &gt;
        &lt;span className={`option-${filter.selected ? &#39;checked-box&#39; : &#39;unchecked-box&#39;} `} /&gt;

        &lt;a onClick={() =&gt; handleSelect(filter)} role=&quot;button&quot;&gt;
          {filter.name}
        &lt;/a&gt;
      &lt;/li&gt;
    ))}
  &lt;/ul&gt;
```

Content Type	Original Author	Original Content on Stackoverflow
Question	Baochang Li	View Question on Stackoverflow
Solution 1 - Typescript	dmudro	View Answer on Stackoverflow
Solution 2 - Typescript	Raymond Wachaga	View Answer on Stackoverflow

JSX not allowed in files with extension '.tsx'eslint(react/jsx-filename-extension)

Typescript Problem Overview

Typescript Solutions

Solution 1 - Typescript

Solution 2 - Typescript

How do I export my project as a .zip of git repository?

SocketException: OS Error: Connection refused, errno = 111 in flutter using django backend

Attributions