
Recently, I implemented a handler to update a list of category strings using the `setState` hook in React. The handler, called `handleSetCategories`, wraps around `setCategories` and looks like this:

```ts
const [categories, setCategories] = useState<Array<string>>([]);

const handleSetCategories = (value: string[]): void => {
  setCategories(value);
};
```

However, throughout my implementation, I ran into a warning where Typescript was inferring the wrong types whenever I tried to update the previous value like so:

<div class="img-blog">
	<img src="/assets/images/blog/set-state-action/set-state-action-error.png" alt="set-previous-state-error">
</div>

#### Solution: Adding SetStateAction

The issue was that the` handleSetCategories` function only accepted the type `value: string[]` as its parameter. However, the value being passed in the above example was a function containing the prev value, which Typescript did not know about.

To fix this issue, I made use of React's `SetStateAction` type, which contains the definition for the function containing the prev value. This is how the updated code looks:

```ts
import { SetStateAction } from 'react';

const [categories, setCategories] = useState<Array<string>>([]);

const handleSetCategories = (value: SetStateAction<string[]>): void => {
  setCategories(value);
};
```

Now that the expected types have been supplied, the Typscript warning has disappeared!

I really hope this short article helped! :thumbsup: :thumbsup:


An article that describes how to fix typescript warning when trying to update a previous value with useState hook.

useState typescript warning: '(prev: any) => any' is not assignable to parameter of type


#### window.addEventListener is not a function

Recently, I've been working on a adding an event listener on a React Native Application to keep track of window events.

```js
// reset state the code in state if the user clicked on the back button in browser
useEffect(() => {
  const popState = window.addEventListener('popstate', (e) => {
    const { state } = e;
    if (state !== null) {
      handleSetPasswordResetInfo({ code: '' });
    }
  });
  // remove listener
  return () => {
    window.removeEventListener('resize', popState);
  };
}, []);
```

While the behavior works on the browser version, I ran into the following error when running the tests in `jest`:

```bash
FAIL  __tests__/ResetCodeScreen.test.jsx
  ● Test suite failed to run

    TypeError: window.addEventListener is not a function
```

After some investigation, I found that `window.addEventListener` is a case of something that exists in the browser, but isn't nessesarily implemented in React Native.

#### Solution

I was able to resolve the issue by explicitly adding a checking for the platform like so:

```js
if (Platform.OS === 'web') {
  // insert logic here
}
```

Luckly, React Native provides a straight forward way of checking the platform. By checking the platform, are able to make sure that the code inside the statement is only being used in the browser. `Plaform.OS == 'web'`. In fact, we can also check the platform if it's `ios` or `android`.

Example snippet:

```js
import { Platform } from 'react-native';
...

  if (Platform.OS === 'web') {
    // reset state the code in state if the user clicked on the back button in browser
    useEffect(() => {
      const popState = window.addEventListener('popstate', (e) => {
        const { state } = e;
        if (state !== null) {
          handleSetPasswordResetInfo({ code: '' });
        }
      });
      // remove listener
      return () => {
        window.removeEventListener('resize', popState);
      };
    }, []);
  }
```

#### Result

```bash
 PASS  components/Ui/PasscodeScreen/__test__/PasscodeScreen.test.jsx (6.476s)
  Testing Passcode Screen
    ✓ renders correctly (158ms)
```

There you have it! I hope this article will be of help to anyone who encounters a similar issue. :smile: :thumbsup:

#### Sources:

- [https://stackoverflow.com/questions/66145171/i-had-an-issue-today-with-window-addeventlistener-and-react-native](https://stackoverflow.com/questions/66145171/i-had-an-issue-today-with-window-addeventlistener-and-react-native)
- [https://reactnative.dev/docs/platform-specific-code](https://reactnative.dev/docs/platform-specific-code)


An article that describes a the fix for the window.AddEventListener is not a function.

React Native: window.AddEventListener is not a function


#### Learn once, write anywhere.

[React Native](https://reactnative.dev/) is an amazing tool for writing cross plaform applications. If you're thinking about building applications with the the capability to support multiple platforms, then this is the tool for you! :raised_hands:

Recently, I've been working on a feature that diplays a list of elements into the view port in a grid-style format. At first, I was able to solve the issue by adding the `grid-gap` property to the styles prop like so:

```js
{
  flex: 1,
  flexDirection: "row",
  flexWrap: "wrap",
  ...
  gap: '1.25rem'
}
```

<div class="img-blog-center">
	<img src="/assets/images/blog/reactnative-spacebetween/grid-spaced.png" alt="grid-gap">
</div>

However as I was implementing tests, I discovered that React Native doesn't support the usage of `grid-gap`.

The test would fail with the following error:

```bash

Invariant Violation: "gap" is not a valid style property.

```

Another solution I tried was to add a `justifyContent: 'space-between'`, this fix certainly fixes the issue, but when less elements were displayed in the bottom of the viewport, the spacing would be too far off.

<div class="img-blog-center">
	<img src="/assets/images/blog/reactnative-spacebetween/grid-spaced-space-between.png" alt="grid-gap-2">
</div>

After another hour of trial and error, I was able to find another way. If you are using the `map` function to render your component, you can try the following code:

```jsx
// Change to the number of columns in your grid
const numCols = 4;

// Change to the spacing for each item
const spacing = '1.25rem';

const parentStyles = {
  flex: 1,
  flexDirection: 'row',
  flexWrap: 'wrap',
};

const childStyles = (index) => {
  let styles = {
    marginBottom: spacing,
    marginLeft: index % numCols !== 0 ? spacing : 0,
  };

  return styles;
};

// Parent View
<View style={parentStyles}>
  {
    // List of child views to render
    contents.map((content, index) => (
      // add a margin of 'spacing' to the bottom of all cards
      // will supply a left-margin to all cards in between the gap,
      // everytime a card is NOT divisible numCols, add a margin to the left
      <View style={childStyles(index)}>
        <Card key={index} content={content} />
      </View>
    ))
  }
</View>;
```

The result may be the same, but it certainly fixed the issue. You can configure the grid-gap by changing the `spacing` variable. You can also configure the number of columns by changing the `numCol` variable.

<div class="img-blog-center">
	<img src="/assets/images/blog/reactnative-spacebetween/grid-spaced.png" alt="grid-gap-3">
</div>

I hope this article will be of help to anyone who encounters a similar issue. :smile: :thumbsup:


An article that describes a solution to add equal spacing between views using React Native Styling.

React Native: Space Between Styling


Recently, I've been looking into learning [React](https://reactjs.org/). React is javascript library developed and maintained by Facebook.

<div class="img-blog-right width-40">
	<img src="/assets/images/blog/vs-code-react/vs-code-react.png" alt="React">
</div>

It is mainly used to create user interfaces, but can also be used to build mobile applications.

In this article, I will be sharing some of the configurations and plugins for [Visual Studio Code](https://code.visualstudio.com/) to make developing applications in React way faster.

#### 1. Emmet for React

[Emmet](https://emmet.io/) is a plugin for text editors to improve the html css workflow. It comes with a series of shortcuts to automatically generate html and css.

Javascipt XML or [JSX](https://www.w3schools.com/react/react_jsx.asp#:~:text=JSX%20stands%20for%20JavaScript%20XML,and%20add%20HTML%20in%20React.) is a syntax extension to Javascript, which mainly used in developing components in React. Although VS code comes with Emmet out of the box, it does not immediately support JSX.

The good news is, you can enable Emmet for React using following steps:

#### 1. Go to the settings page in VS Code

<div style="width: 100%;">
	<img src="/assets/images/blog/vs-code-react/settings-page.png" alt="settings">
</div>

#### 2. Go to the `Workspace Settings` tab

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/workspace-settings.png" alt="settings">
</div>

#### 3. Under `Extensions` look for `Emmet`

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/emmet-boxed.png" alt="settings">
</div>

#### 4. Click on `"Edit in settings.json"`

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/settings.png" alt="settings">
</div>

#### 5. Add the following lines of code to `"settings.json"`

```json
{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}
```

Success! Emmet should now be working!!! :raised_hands:

#### 2. Prettier Plugin

[Prettier](https://prettier.io/docs/en/why-prettier.html) is an opinionated code formatter that enforces consistent style by parsing the code. It is easy to adopt; has low overhead; and saves time and energy on code reviews.

To install Prettier you can follow these steps:

#### 1. In the side panel click on the Extensions icon

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/extensions.png" alt="settings">
</div>

#### 2. In the search bar, search for `Prettier`

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/search-prettier.png" alt="settings">
</div>

#### 3. Install `Pretter`

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/install-prettier.png" alt="settings">
</div>

#### 4. To verify prettier is installed, you should see the following on the bottom of the code editor

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/prettier-verify.png" alt="settings">
</div>

Success! Prettier has now been installed!! :raised_hands: :clap:


An article that shows how to customize VS code to improve productivity with React

React

useState typescript warning: '(prev: any) => any' is not assignable to parameter of type
react

React Native: window.AddEventListener is not a function
tech react

React Native: Space Between Styling
tech react

Setting up Visual Studio Code for Developing React Applications
tech react

React

React Native: window.AddEventListener is not a functiontechreact

React Native: Space Between Stylingtechreact

Setting up Visual Studio Code for Developing React Applicationstechreact

React Native: window.AddEventListener is not a function
tech react

React Native: Space Between Styling
tech react

Setting up Visual Studio Code for Developing React Applications
tech react