In the SVG file, **try changing:**
```html
    sketch:type TO sketchType
    xmlns:xlink TO xmlnsXlink
    xlink:href  TO xlinkHref
```
*etc...*

The idea is to create camelCase property, remember that you are working with JSX, you are not creating a string as XML does.

Since we are in the JSX playground your SVG tags should be written as camelCase

So you can easily optimize your SVG using the link below to avoid this error :)

[svgminify][2]

  [2]: https://www.svgminify.com

The most simple solution is to just convert the SVG file to JSX.Then create a separate component or just copy paste the &lt;svg&gt; tag. This website does the job perfectly.

https://svg2jsx.com/


I had the same issue with all my svg files. Opening them in Adobe Illustrator and saving them again solved the issue.

I recommend using [svgo](https://github.com/svg/svgo) to compress your SVG files. Simple CLI tool that runs with NodeJS and doesn&#39;t require you to upload your copyrighted SVGs anywhere.

I try to connect Android project to Firebase but I get this error as I added the following to pubsec.yaml:

    firebase_auth: ^0.16.0
    cloud_firestore: ^0.13.5


when I gradle run and it is not working

    Plugin project :firebase_core_web not found. Please update settings.gradle.
    Plugin project :firebase_auth_web not found. Please update settings.gradle.
    Plugin project :cloud_firestore_web not found. Please update settings.gradle.

Is there any solution for it


Plugin project :firebase_core_web not found

Normally, my pipelines take 15 minutes to execute. 

Recently, for some strange reasons, some pipelines take between 45 minutes and 6 hours to fail.

Is it possible to set a default timeout limit on GitHub Action&#39;s pipeline (for example, auto cancel after 30 minutes)?



Set default Timeout on Github action pipeline

I get the following error when trying to download svg as a React Component.

&gt;SyntaxError: unknown: Namespace tags are not supported by default. React&#39;s JSX doesn&#39;t support namespace tags. You can turn on the &#39;throwIfNamespace&#39; flag to bypass this warning.

    import React from &quot;react&quot;;
    import { ReactComponent as LO } from &quot;../a/Logo.svg&quot;
    import { NavLink } from &quot;react-router-dom&quot;;
    
    const Logo = () =&gt; (
      &lt;&gt;
        &lt;NavLink to={&quot;/&quot;}&gt;
         &lt;LO width={&quot;40px&quot;} height={&quot;40px&quot;} /&gt;
        &lt;/NavLink&gt;
      &lt;/&gt;
    );
    
    export default Logo;


What is the reason ? 

SyntaxError: unknown: Namespace tags are not supported by default

I get the following error when trying to download svg as a React Component.
>SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning.
<pre><code class="hljs language-javascript">import React from "react";
import { ReactComponent as LO } from "../a/Logo.svg"
import { NavLink } from "react-router-dom";

const Logo = () => (
 &#x3C;>
 &#x3C;NavLink to={"/"}>
 &#x3C;LO width={"40px"} height={"40px"} />
 &#x3C;/NavLink>
 &#x3C;/>
);

export default Logo;
</code></pre>
What is the reason ?

I am learning TypeScript and some bits are confusing to me. One bit is below:

```typescript
interface Props {
  name: string;
}

const PrintName: React.FC&lt;Props&gt; = (props) =&gt; {
  return (
    &lt;div&gt;
      &lt;p style={{ fontWeight: props.priority ? &quot;bold&quot; : &quot;normal&quot; }}&gt;
        {props.name}
      &lt;/p&gt;
    &lt;/div&gt;
  )
}

const PrintName2 = (props: Props) =&gt; {
  return (
    &lt;div&gt;
      &lt;p style={{ fontWeight: props.priority ? &quot;bold&quot; : &quot;normal&quot; }}&gt;
        {props.name}
      &lt;/p&gt;
    &lt;/div&gt;
  )
}
```

For both functional components above, I see TypeScript generates the same JS code. The `PrintName2` component seems more streamlined to me as far as readability. I wonder what&#39;s the difference between the two definitions and if anyone is using second type of React component?

TypeScript React.FC&lt;Props&gt; confusion

I&#39;m working with a simple component that does a side effect. My test passes, but I&#39;m getting the warning `Warning: An update to Hello inside a test was not wrapped in act(...).`.

I&#39;m also don&#39;t know if `waitForElement` is the best way to write this test.

**My component**

```javascript
export default function Hello() {
  const [posts, setPosts] = useState([]);
  
  useEffect(() =&gt; {
    const fetchData = async () =&gt; {
      const response = await axios.get(&#39;https://jsonplaceholder.typicode.com/posts&#39;);
      setPosts(response.data);
    }
    
    fetchData();
  }, []);
  
  return (
    &lt;div&gt;
      &lt;ul&gt;
        {
          posts.map(
            post =&gt; &lt;li key={post.id}&gt;{post.title}&lt;/li&gt;
          )
        }
      &lt;/ul&gt;
    &lt;/div&gt;
  )
}

```

**My component test**

```javascript
import React from &#39;react&#39;;
import {render, cleanup, act } from &#39;@testing-library/react&#39;;
import mockAxios from &#39;axios&#39;;
import Hello from &#39;.&#39;;

afterEach(cleanup);

it(&#39;renders hello correctly&#39;, async () =&gt; {
  mockAxios.get.mockResolvedValue({
    data: [
        { id: 1, title: &#39;post one&#39; },
        { id: 2, title: &#39;post two&#39; },
      ],
  });

  const { asFragment } = await waitForElement(() =&gt; render(&lt;Hello /&gt;));
  
  expect(asFragment()).toMatchSnapshot();
});
```

How to solve the &quot;update was not wrapped in act()&quot; warning in testing-library-react?

I&#39;m trying to wrap my head around custom hooks.  I understand normal hooks which is just fine, but my question is, when writing a custom hook, what is the difference between that and a normal function?  I mean why not call it a normal function instead of calling it something like use*

react custom hooks vs normal functions, what is the difference

one application is running on port 3000 and I want to run another application on a different port of the default port. How I change this in React Next.js.
My **package.js** script is 

    &quot;scripts&quot;: {
        &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;,
        &quot;dev&quot;: &quot;next&quot;,
        &quot;build&quot;: &quot;next build&quot;,
        &quot;start&quot;: &quot;next start&quot;
      },

and start script command is
`npm run dev`

How to Set port in next.js

I need to connect to WebSockets server and log it&#39;s messages. With React class component I&#39;d put this logic in `componentDidMount` lifecycle hook and move on happily, but I&#39;m not sure how to properly implement it with hooks.

Here&#39;s my first attempt.
```js
import React, {useEffect} from &#39;react&#39;;

export default function AppWs() {
  useEffect(() =&gt; {
    let ws = new WebSocket(&#39;wss://ws.kraken.com/&#39;);
    ws.onopen = () =&gt; console.log(&#39;ws opened&#39;);
    ws.onclose = () =&gt; console.log(&#39;ws closed&#39;);

    ws.onmessage = e =&gt; {
      const message = JSON.parse(e.data);
      console.log(&#39;e&#39;, message);
    };

    return () =&gt; {
      ws.close();
    }
  }, []);

  return (
    &lt;div&gt;hooks + ws&lt;/div&gt;
  )
}
```
I added connection and log logic to `useEffect`, provided empty array with dependencies, and everything worked great. Until I needed to add `pause` state to pause logging.
```js
export default function AppWs() {
  const [isPaused, setPause] = useState(false);

  useEffect(() =&gt; {
    let ws = new WebSocket(&#39;wss://ws.kraken.com/&#39;);
    ws.onopen = () =&gt; console.log(&#39;ws opened&#39;);
    ws.onclose = () =&gt; console.log(&#39;ws closed&#39;);

    ws.onmessage = e =&gt; {
      if (isPaused) return;
      const message = JSON.parse(e.data);
      console.log(&#39;e&#39;, message);
    };

    return () =&gt; {
      ws.close();
    }
  }, []);

  return (
    &lt;div&gt;
      &lt;button onClick={() =&gt; setPause(!isPaused)}&gt;{isPaused ? &#39;Resume&#39; : &#39;Pause&#39;}&lt;/button&gt;
    &lt;/div&gt;
  )
}
```
ESLint started to yell at me that I should add `isPaused` state as a dependency to `useEffect`.  
Well, ok, done.  
But I noticed re-connection to WS server after every time I click the button. This is clearly not what I want.

My next iteration was to use two `useEffect`s: one for connection and one for message processing.
```js
export default function AppWs() {
  const [isPaused, setPause] = useState(false);
  const [ws, setWs] = useState(null);

  useEffect(() =&gt; {
    const wsClient = new WebSocket(&#39;wss://ws.kraken.com/&#39;);
    wsClient.onopen = () =&gt; {
      console.log(&#39;ws opened&#39;);
      setWs(wsClient);
    };
    wsClient.onclose = () =&gt; console.log(&#39;ws closed&#39;);

    return () =&gt; {
      wsClient.close();
    }
  }, []);

  useEffect(() =&gt; {
    if (!ws) return;

    ws.onmessage = e =&gt; {
      if (isPaused) return;
      const message = JSON.parse(e.data);
      console.log(&#39;e&#39;, message);
    };
  }, [isPaused, ws]);

  return (
    &lt;div&gt;
      &lt;button onClick={() =&gt; setPause(!isPaused)}&gt;{isPaused ? &#39;Resume&#39; : &#39;Pause&#39;}&lt;/button&gt;
    &lt;/div&gt;
  )
}
```
This works as expected, but I have a feeling that I miss something and this task can be solved easier, with one `useEffect`.
Please help to refactor the code on convince me that I&#39;m using React hooks in a proper way. Thanks!


Content Type	Original Author	Original Content on Stackoverflow
Question	Silicum Silium	View Question on Stackoverflow
Solution 1 - Reactjs	Frawel	View Answer on Stackoverflow
Solution 2 - Reactjs	Ahmad Salih	View Answer on Stackoverflow
Solution 3 - Reactjs	Tharusha Jayasooriya	View Answer on Stackoverflow
Solution 4 - Reactjs	Bozena Z.	View Answer on Stackoverflow
Solution 5 - Reactjs	devgioele	View Answer on Stackoverflow

SyntaxError: unknown: Namespace tags are not supported by default

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

Solution 3 - Reactjs

Solution 4 - Reactjs

Solution 5 - Reactjs

Set default Timeout on Github action pipeline

Plugin project :firebase_core_web not found

Attributions