That&#39;s optional chaining: [MDN][1]

&gt; The **optional chaining** operator (`?.`) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.
&gt;
&gt; The `?.` operator is like the `.` chaining operator, except that instead of causing an error if a reference is nullish (`null` or `undefined`), the expression short-circuits with a return value of `undefined`. When used with function calls, it returns `undefined` if the given function does not exist. 
&gt;
&gt; This results in shorter and simpler expressions when accessing chained properties when the possibility exists that a reference may be missing. It can also be helpful while exploring the content of an object when there&#39;s no known guarantee as to which properties are required.


  [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

I&#39;m a beginner to regex and I am trying to make an expression to find if there are two of the same digits next to each other, and the digit behind and in front of the pair is different.

For example,

123456678 should match as there is a double 6,

1234566678 should not match as there is no double with different surrounding numbers.
12334566 should match because there are two 3s.

So far i have this which works only with 1, and as long as the double is not at the start or end of the string, however I can deal with that by adding a letter at the start and end. 

```
^.*([^1]11[^1]).*$
```

I know i can use `[0-9]` instead of the 1s but the problem is having them all be the same digit. 

Thank you!

regex to find a pair of adjacent digits with different digits around them

I recently updated my Xcode to 11.4. When I run the app on the device, i&#39;ve noticed that all my navigations item&#39;s titles gone fully black when being set from storyboard.
[![enter image description here][1]][1]

You can&#39;t change neither from code, the following line of code doesn&#39;t work anymore

```swift
self.navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
```

I only make it work using some iOS 13 stuffs UINavigationBarAppearance

```swift
@available(iOS 13.0, *)
    private func setupNavigationBar() {
        let app = UINavigationBarAppearance()
        app.titleTextAttributes = [.foregroundColor: UIColor.white]
        app.backgroundColor = Constants.Color.barColor
        self.navigationController?.navigationBar.compactAppearance = app
        self.navigationController?.navigationBar.standardAppearance = app
        self.navigationController?.navigationBar.scrollEdgeAppearance = app
        
        self.navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
    }
```

Can somebody explain me why??? This is a crucial bug, or some new hidden feature?


[1]: https://i.stack.imgur.com/FC4Ei.png

Xcode 11.4. Navigation&#39;s Title Color gone BLACK from storyboard

I know what [ternary operator](https://reactjs.org/docs/conditional-rendering.html) is in React. 

When I&#39;m developing react native app I encounter this kind of syntax that is covered by my eslint as unexpected token

`ESLint: Parsing error: Unexpected token .`


It goes like this:

`	const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;`

What does that mean? It uses [null coalescing operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_Coalescing_Operator) in the end, however I can&#39;t understand what does the question mark do before a dot. 

I know it is a correct syntax because it is a template from [expo](https://expo.io/dashboard/robertwt7) and they&#39;re very popular in react-native development community.

Can anyone help me explain?

Question mark before dot in javascript / react

I know what <a href="https://reactjs.org/docs/conditional-rendering.html" target="_blank" rel="noopener noreferrer">ternary operator</a> is in React.
When I'm developing react native app I encounter this kind of syntax that is covered by my eslint as unexpected token
<code>ESLint: Parsing error: Unexpected token .</code>
It goes like this:
<code>	const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;</code>
What does that mean? It uses <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_Coalescing_Operator" target="_blank" rel="noopener noreferrer">null coalescing operator</a> in the end, however I can't understand what does the question mark do before a dot.
I know it is a correct syntax because it is a template from <a href="https://expo.io/dashboard/robertwt7" target="_blank" rel="noopener noreferrer">expo</a> and they're very popular in react-native development community.
Can anyone help me explain?

I&#39;ve created a React app using `create-react-app` but whenever I start the dev server (using `npm start`), it opens up my browser. I want to make it so that it doesn&#39;t open my browser whenever I start my dev server.

How can I accomplish this?

How to disable open browser in CRA?

I&#39;m coding a ReactJS class with Typescript and Material-ui, in a .tsx file. In one of my custom components, I want to create a reference to one of the components that I use in my custom component.

    export class MyTextField extends React.Component&lt;MyProps, MyState&gt; {
      private refTextField: React.RefObject&lt;TextField&gt;;
      constructor(props: MyProps) {
        super(props);
        this.refTextField = React.createRef();
      }

      render(): JSX.Element {
        const { id, label, value: defaultValue } = this.props;
        const { value } = this.state;
        const element = (
          &lt;TextField ref={this.refTextField} id={id} label={label} defaultValue={defaultValue} value={value} /&gt;
        );

        return element;
      }
    }


During compilation, I get an error on the declaration of my reference:

&gt; &#39;TextField&#39; refers to a value, but is being used as a type here. TS2749

I tried to put &quot;typeof TextField&quot; in my declaration, but I have another message, when valuing the ref property in my render :

&gt; Type &#39;RefObject&lt;(props: TextFieldProps) =&gt; Element&gt;&#39; is not assignable
&gt; to type &#39;((instance: HTMLDivElement | null) =&gt; void) |
&gt; RefObject&lt;HTMLDivElement&gt; | null | undefined&#39;.     Type
&gt; &#39;RefObject&lt;(props: TextFieldProps) =&gt; Element&gt;&#39; is not assignable to
&gt; type &#39;RefObject&lt;HTMLDivElement&gt;&#39;.
&gt;     Type &#39;(props: TextFieldProps) =&gt; Element&#39; is missing the following properties from type &#39;HTMLDivElement&#39;: align, addEventListener,
&gt; removeEventListener, accessKey, and 238 more. TS2322

Any ideas ?
thank you so much

ReactJS and Typescript : refers to a value, but is being used as a type here (TS2749)

 Currently starting up the server on my client side, the error above is what I have been 
 getting. I am using Typescript, React, ESlint. I can&#39;t seem to go forward since this error 
 has been haunting me. The github page for Eslint hasn&#39;t been much help either. 

This error went up after I had created the useMutation component and exported it in the 
index.ts, 
 Not sure how to get rid of this error.

    Below is my package.json
```
    {
    &quot;name&quot;: &quot;tinyhouse_client&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
      &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^9.3.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^7.1.2&quot;,
      &quot;@types/jest&quot;: &quot;^24.0.0&quot;,
      &quot;@types/node&quot;: &quot;^12.0.0&quot;,
      &quot;@types/react&quot;: &quot;^16.9.35&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.9.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^3.0.2&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-scripts&quot;: &quot;3.4.1&quot;,
      &quot;typescript&quot;: &quot;~2.23.0&quot;
      },
      &quot;resolutions&quot;: {
     &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^2.23.0&quot;,
     &quot;@typescript-eslint/parser&quot;: &quot;^2.23.0&quot;,
     &quot;@typescript-eslint/typescript-estree&quot;: &quot;^2.23.0&quot;
     },
     &quot;scripts&quot;: {
     &quot;start&quot;: &quot;react-scripts start&quot;,
     &quot; build&quot;: &quot;react-scripts build&quot;,
     &quot;test&quot;: &quot;react-scripts test&quot;,
     &quot;eject&quot;: &quot;react-scripts eject&quot;
     },
     &quot;eslintConfig&quot;: {
     &quot;extends&quot;: &quot;react-app&quot;
     },
     &quot;browserslist&quot;: {
     &quot;production&quot;: [
      &quot;&gt;0.2%&quot;,
      &quot;not dead&quot;,
      &quot;not op_mini all&quot;
    ],
      &quot;development&quot;: [
      &quot;last 1 chrome version&quot;,
      &quot;last 1 firefox version&quot;,
      &quot;last 1 safari version&quot;
     ]
     },
     **strong text** &quot;proxy&quot;: &quot;http://localhost:9000&quot;
      }
```

    Below is my index.ts
```
    export * from &#39;./server&#39;;
    export * from &#39;./useQuery&#39;;
    export * from &#39;./useMutation&#39;;
```
    And my useMutation.ts

```
    import { useState } from &#39;react&#39;;
    import { server } from &#39;./server&#39;;

    interface State&lt;TData&gt; {
    data: TData | null;
    loading: boolean; 
    error: boolean;
    }

    type MutationTuple&lt;TData, TVariables&gt; = [
    (variables?: TVariables | undefined) =&gt; Promise&lt;void&gt;,
    State&lt;TData&gt;
    ];

    export const useMutation = &lt;TData = any, TVariables = any&gt;(
    query: string
    ): MutationTuple&lt;TData, TVariables&gt; =&gt; { 
    const [state, setState] = useState&lt;State&lt;TData&gt;&gt;({
    data: null,
    loading: false,
    error: false,
    })

    const fetch = async (variables?: TVariables) =&gt; {
    try {
      setState({ data: null, loading: true, error: false });

      const { data, errors } = await server.fetch&lt;TData, TVariables&gt;({ query, variables });
      if (errors &amp;&amp; errors.length) {
        throw new Error(errors[0].message);
      }

      setState({ data, loading: false, error: false });
    } catch (err) {
      setState({ data: null, loading: false, error: true });
      throw console.error(err);
    }
   }

   return [fetch, state];
};
```





Line 0: Parsing error: Cannot read property &#39;map&#39; of undefined

I am trying to present a simple user list from an API which returns this:

```
[{&quot;UserID&quot;:2,&quot;FirstName&quot;:&quot;User2&quot;},{&quot;UserID&quot;:1,&quot;FirstName&quot;:&quot;User1&quot;}]
```

I do not understand fully how to handle Axios responses with types. The TypeScript error is

&gt; Type &#39;{} | { id: number; firstName: string; }&#39; is not assignable to type &#39;IntrinsicAttributes &amp; UserListProps &amp; { children?: ReactNode; }&#39;.
&gt;
&gt; Property &#39;items&#39; is missing in type &#39;{}&#39; but required in type &#39;UserListProps&#39;.

from the `&lt;UserList /&gt;` element in the `Users.tsx` file below. Is my `User` interface wrong?

```
import React, {useEffect, useState, Fragment } from &#39;react&#39;;
import UserList from &#39;./UserList&#39;;
import axios, {AxiosResponse} from &#39;axios&#39;;

interface User {
    id: number;
    firstName: string;
}

const Users: React.FC = (props) =&gt; {
    const [users, setUserList] = useState&lt;User&gt;();

    useEffect(() =&gt; {
        // Use [] as second argument in useEffect for not rendering each time
        axios.get(&#39;http://localhost:8080/admin/users&#39;)
        .then((response: AxiosResponse) =&gt; {
            console.log(response.data);
            setUserList( response.data );
        });
    }, []);

    return (
        &lt;Fragment&gt;
            &lt;UserList {...users} /&gt;
        &lt;/Fragment&gt;

    );
};
export default Users;
```

Below is my `UserList.tsx`.
```
import React, {Fragment } from &#39;react&#39;;

interface UserListProps {
    items: {id: number, firstName: string}[];
};

const UserList: React.FC&lt;UserListProps&gt; = (props) =&gt; {
    return (
        &lt;Fragment&gt;
            &lt;ul&gt;
            {props.items.map(user =&gt; (
                &lt;li key={user.id}&gt;
                    &lt;span&gt;{user.firstName}&lt;/span&gt;
                    {/* not call delete function, just point to it
                    // set this to null in bind() */}
                &lt;/li&gt;
            ))}
            &lt;/ul&gt;
        &lt;/Fragment&gt;
    );
};

export default UserList;
```




React and TypeScript—which types for an Axios response?

I am creating a page for user to update personal data with React-Hook-Form.
Once paged is loaded, I use `useEffect` to fetch the user&#39;s current personal data and set them into default value of the form.

I put the fetched value into `defaultValue` of `&lt;Controller /&gt;`. 
However, it is just not showing in the text box.
Here is my code:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import React, {useState, useEffect, useCallback} from &#39;react&#39;;
    import { useForm, Controller } from &#39;react-hook-form&#39;
    import { URL } from &#39;../constants&#39;;

    const UpdateUserData = props =&gt; {
        const [userData, setUserData] = useState(null);
        const { handleSubmit, control} = useForm({mode: &#39;onBlur&#39;});

        const fetchUserData = useCallback(async account =&gt; {
            const userData = await fetch(`${URL}/user/${account}`)
                                .then(res=&gt; res.json());
            console.log(userData);
            setUserData(userData);
        }, []);

        useEffect(() =&gt; {
            const account = localStorage.getItem(&#39;account&#39;);
            fetchUserData(account);
        }, [fetchUserData])

        const onSubmit = async (data) =&gt; {
            // TODO
        }

        return (
            &lt;div&gt;
                &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
                    &lt;div&gt;
                        &lt;label&gt;User Name:&lt;/label&gt;
                        &lt;Controller
                            as={&lt;input type=&#39;text&#39; /&gt;}
                            control={control}
                            defaultValue={userData ? userData.name : &#39;&#39;}
                            name=&#39;name&#39;
                        /&gt;
                    &lt;/div&gt;
                    
                    &lt;div&gt;
                        &lt;label&gt;Phone:&lt;/label&gt;
                        &lt;Controller
                            as={&lt;input type=&#39;text&#39; /&gt;}
                            control={control}
                            defaultValue={userData ? userData.phone : &#39;&#39;}
                            name=&#39;phone&#39;
                        /&gt;
                    &lt;/div&gt;
                    &lt;button&gt;Submit&lt;/button&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        );
    }

    export default UpdateUserData;

&lt;!-- end snippet --&gt;

The called API is working well and the value is actually set to `userData` state.

    {
      name: &quot;John&quot;,
      phone: &quot;02-98541566&quot;
      ...
    }



I also tried to `setUserData` with mock data in `useEffect()`, and it doesn&#39;t work either.
Is there any problem in my above code?  

How to change React-Hook-Form defaultValue with useEffect()?

EDIT: I am uncertain which steps I took to resolve this problem, and am no longer seeing this error message so I cannot test the solutions below. Please try them individually as different answers seem to be working for different people.

The iOS version works fine, but running Android Studio on my Mac I get the following Gradle Build error (paraphrased):
```
:ReactNative:Running ‘[node, -e, console.log(require(‘react-native/cli’).bin);]’ command failed.

- Where:
Script ‘/Users/…/Desktop/…/node_modules/@react-native-community/cli-platform-android/native_modules.gradle’ line: 154

- What went wrong:
A problem occurred evaluating script.
&gt; Cannot run program “node”: error=2, No such file or directory

Caused by: java.io.IOException: Cannot run program “node”: error=2, No such file or directory
```

I&#39;ve tried so many things:

 - Following the React Native development set-up: https://reactnative.dev/docs/environment-setup
 - Following this advice about [renaming?] the node path: https://stackoverflow.com/a/54007652
 - Following this advice about symlink: https://stackoverflow.com/a/52779097
 - Ran brew install node. Message: node 14.2.0 is already installed, it’s just not linked. Tried to run brew link --overwrite node, error /usr/local/share/doc/node is not writable.
 - Tried to uninstall and reinstall all the package managers, node, yarn, whatever.

I used to be able to still run yarn android in Terminal, but even that has stopped working.





React Native on Android: Cannot run program &quot;node&quot;: error=2, No such file or directory

I am new to this [react-query][1] library. 

I know that when I want to fetch data, with this library I can do something like this:

    const fetchData = async()=&gt;{...}
    
    // it starts fetching data from backend with this line of code
    const {status, data, error} = useQuery(myKey, fetchData());

It works. But how to trigger the data fetching only when a button is clicked? , I know I probably could do something like `&lt;Button onPress={() =&gt; {useQuery(myKey, fetchData())}}/&gt;` , but how to manage the returned data and status...




  [1]: https://github.com/tannerlinsley/react-query

React-Query: How to useQuery when button is clicked

Running `npx react-native run-android` is working on the android emulator, and also on a Samsung device I have. But when connecting a MI MAX 2 device, I get the following:

```
&gt; Task :app:installDebug
Installing APK &#39;app-debug.apk&#39; on &#39;MI MAX 2 - 7.1.1&#39; for app:debug

&gt; Task :app:installDebug FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use &#39;--warning-mode all&#39; to show the individual deprecation warnings.
See https://docs.gradle.org/6.5/userguide/command_line_interface.html#sec:command_line_warnings
847 actionable tasks: 2 executed, 845 up-to-date
Unable to install /Users/[....]/android/app/build/outputs/apk/debug/app-debug.apk
com.android.ddmlib.InstallException: Unknown failure: Error: java.lang.SecurityException: You need the android.permission.INSTALL_GRANT_RUNTIME_PERMISSIONS permission to use the PackageManager.INSTALL_GRANT_RUNTIME_PERMISSIONS flag
        at com.android.ddmlib.internal.DeviceImpl.installRemotePackage(DeviceImpl.java:1224)
        at com.android.ddmlib.internal.DeviceImpl.installPackage(DeviceImpl.java:1050)
        at com.android.ddmlib.internal.DeviceImpl.installPackage(DeviceImpl.java:1026)
        at com.android.ddmlib.internal.DeviceImpl.installPackage(DeviceImpl.java:1015)
        at ... etc, etc, etc

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task &#39;:app:installDebug&#39;.
&gt; java.util.concurrent.ExecutionException: com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unknown failure: Error: java.lang.SecurityException: You need the android.permission.INSTALL_GRANT_RUNTIME_PERMISSIONS permission to use the PackageManager.INSTALL_GRANT_RUNTIME_PERMISSIONS flag

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 30s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=4105
Unable to install /Users/[....]/android/app/build/outputs/apk/debug/app-debug.apk
```

Note: I tried adding the following to my `AndroidManifest.xml` but it didn&#39;t appear to make a difference:
```
&lt;uses-permission android:name=&quot;android.permission.INSTALL_GRANT_RUNTIME_PERMISSIONS&quot;/&gt;
```
Any ideas?

SecurityException during app:installDebug Task while attempting to run react-native app on MI MAX 2 android device

```none
FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task &#39;:react-native-linear-gradient:compileDebugJavaWithJavac&#39;.
&gt; Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation.
```

When I upgraded to Mac os Big sur and run,

    npx react-native run-android

I got this error (Android). I have tried a lot of solutions from Stack Overflow, but none of them worked. 

I have created a fresh project and it&#39;s working. Also some of the old projects are also working perfectly.

    *react-native Version: &quot;0.63.3&quot;,*

Please help me to find a solution?

Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation

I am trying to build a react-native app in iOS but unfortunately coming across the following issue (referring to libevent/Flipper):

`&#39;event2/event-config.h&#39; file not found`

I have react-native v0.63.4 and I have linked the packages using `react-native link` and also run `pod update`. I have also deleted my `Podfile.lock` and run `pod install` again.

My guess is that it is something to do with the Flipper version? When I comment out `use_flipper!` in my Podfile and build, it works.

Any ideas on how I can resolve this?

Content Type	Original Author	Original Content on Stackoverflow
Question	Robert Tirta	View Question on Stackoverflow
Solution 1 - Reactjs	NULL SWEΔT	View Answer on Stackoverflow

Question mark before dot in javascript / react

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Xcode 11.4. Navigation's Title Color gone BLACK from storyboard

regex to find a pair of adjacent digits with different digits around them

Attributions