See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• react-router-dom v6 params only numbers

  I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:

   <Route path="list/:id(\d+)" element={<MyComponent/>} /> 
  

  but it not work in v6.
• How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

  My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

  This my .env file

  REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
  REACT_APP_authDomain=XXXXX.firebaseapp.com
  REACT_APP_projectId=XXXX
  REACT_APP_storageBucket=XXXXX.appspot.com
  REACT_APP_messagingSenderId=4997390XXXXX
  REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
  REACT_APP_measurementId=G-M1XDXXXXXX
  

  This my firebase config file

  const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId,
    measurementId: process.env.REACT_APP_measurementId,
  };
  
  when I debugging firebaseConfig object
  
  console.log(firebaseConfig.apiKey);  ==========> undefined 
  console.log(firebaseConfig.authDomain);  ==========> undefined 
  console.log(firebaseConfig.projectId);  ==========> undefined 
  console.log(firebaseConfig.storageBucket); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  console.log(firebaseConfig.appId); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  
  

  client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
• How can I get toast-ui editor content?

  I am a student studying. I think I'm doing it conceptually wrong.

  I'm trying to use vue3 and type script And I'm going to use toast-ui editor.

  I get some errors.

  1. refEditor.value.invoke is not a function

  How can I get toast-ui editor content?

  this is my code

  <template>
    <div class="markup-tables flex">
      <va-card :title="$t('tables.stripedHoverable')">
        <va-card-content>
          <div id="refEditor" ref="refEditor"></div>
          <br />
          <div class="row justify--end paginationButtons-left">
            <va-button class="mr-2 mb-2">List</va-button>
          </div>
          <div class="row justify--end paginationButtons-right">
            <va-button class="mr-2 mb-2" @click="getHTML">Save</va-button>
          </div>
        </va-card-content>
      </va-card>
    </div>
  </template>
  
  <script lang="ts">
  import '@toast-ui/editor/dist/toastui-editor.css'
  
  import Editor from '@toast-ui/editor'
  import { defineComponent, onMounted, ref } from 'vue'
  
  import data from '@/data/tables/markup-table/data.json'
  
  export default defineComponent({
    name: 'BoardWrite',
    setup() {
      const refEditor = ref(null)
  
      const getHTML = () => {
        console.log('getHTML test')
        let html = refEditor.value.invoke('getHtml')
        console.log(html)
        // ERROR 
      }
  
      onMounted(() => {
        const editor = new Editor({
          el: refEditor.value,
          height: '700px',
          initialEditType: 'markdown',
          previewStyle: 'vertical',
        })
        editor.getMarkdown()
      })
  
      return {
        getHTML,
        refEditor,
      }
    },
  })
  </script>
  
• Custom utility types (generic types) for classes `IsClass` of TypeScript

  I am trying to create a generic type to make sure the first parameter to be a class. However, the factory function parameter cannot be replaced by a generic type.

  The following upper parts were my attempts. The last part were a working example that directly write the extends ... which worked.

  Why does it works inside a function, but not works as a generic type IsClass?

  class A {
    constructor() {
  
    }
  }
  class B {}
  class C extends B {}
  
  // ERRORS:
  
  type IsClass<T extends new (...args: any) => InstanceType<T>> = T
  type IsClass2<T> = T extends new (...args: any) => InstanceType<T>? T: never
  
  type X = IsClass<A>
  type Y = IsClass2<A>
  
  function someFactoryError<T>(clx: IsClass<T>) {
    return new clx()
  }
  
  someFactoryError(A)
  
  function someFactoryError2<T>(clx: IsClass2<T>) {
    return new clx()
  }
  
  someFactoryError2(A)
  
  // WORKS:
  
  function someFactoryWorks<T extends new (...args: any) => InstanceType<T>>(clx: T) {
    return new clx()
  }
  
  const a0 = someFactoryWorks(A)
  const b0 = someFactoryWorks(B)
  

  TypeScript Playground

  Related:

  • stackoverflow
  • TypeScript Handbook: Abstract Construct Signatures
• Async function passed as prop into React component causing @typescript-eslint/no-misused-promises error

  I have the following asynchronous submitNewPatient function which is throwing @typescript-eslint/no-misused-promises error message from elint. Is it possible to adjust the function such that it removes this error?

  const submitNewPatient = async (values: PatientFormValues) => {
      try {
        const { data: newPatient } = await axios.post<Patient>(
          `${apiBaseUrl}/patients`,
          values
        );
        dispatch({ type: "ADD_PATIENT", payload: newPatient });
        closeModal();
      } catch (e: unknown) {
        if (axios.isAxiosError(e)) {
          console.error(e?.response?.data || "Unrecognized axios error");
          setError(
            String(e?.response?.data?.error) || "Unrecognized axios error"
          );
        } else {
          console.error("Unknown error", e);
          setError("Unknown error");
        }
      }
    };
  

  Component used to pass function as a prop:

  <AddPatientModal
          modalOpen={modalOpen}
          onSubmit={submitNewPatient}
          error={error}
          onClose={closeModal}
        />
  

  I have also tried the following which removes the eslint error message based. However, seems like I am not entering the async code block (perhaps not triggering the async() function):

    const submitNewPatient = (values: PatientFormValues) => {
      async () => {
        try {
          const { data: newPatient } = await axios.post<Patient>(
            `${apiBaseUrl}/patients`,
            values
          );
          dispatch({ type: "ADD_PATIENT", payload: newPatient });
          closeModal();
        } catch (e: unknown) {
          if (axios.isAxiosError(e)) {
            console.error(e?.response?.data || "Unrecognized axios error");
            setError(
              String(e?.response?.data?.error) || "Unrecognized axios error"
            );
          } else {
            console.error("Unknown error", e);
            setError("Unknown error");
          }
        }
      };
    };
  
• HTTP authentication with PHP for specific pages

  I have been trying to fix one issue for the last two weeks but didn't find any solution to my problem. So, I am trying to add HTTP authentication with PHP 7.4.

  The main issue

  I have to add restrictions for specific URLs ( For example, https://example.com/photos ) with PHP, and I am using the below code. But the problem is I have to show logged-in users on other pages, too. For example, if I didn't log in, then anything to show, but if I am logged in need to show username and password on all pages, but again I have to restrict only specific pages.

  PHP Code:

  Header("WWW-Authenticate: Basic realm='Members Only' valid-user");
  http_response_code(401);
  echo "<script> window.location.replace( 'https://example.com/sign-up' ) </script>";
  exit;
  

  .htaccess Code:

  AuthUserfile PATH_TO_THE_FILE/.htpasswd
  AuthName "Members Only"
  AuthType Basic
  AuthBasicProvider file
  

  I hope someone will help me soon.
• Firebase Authentication with custom domain

  I have a question about Firebase Authentication for custom domains. I added the dns record and tried to verify the email after 24 hours, but when I click the link I get a 404 error. How can I fix this problem?

  Thanks for your help!
• Acces to XMLHttpRequest at 'https://api-link/login' from origin 'http://localhost/3000' has been blocked by cors policy. (React, , firebase, JWT))

  When I try to implement a secure login system in React application with firebase using JSON Web Token (JWT) I am getting this error: Acces to XMLHttpRequest at 'https://api-link/login' from origin 'http://localhost/3000' has been blocked by cors policy. I am using node js for the backend.

  I also use cors middleware:

  const cors = require("cors");
  app.use(cors());
  

  My Backend Code:

    const verifyJWT = (req, res, next) => {
    const authHeader = req.headers.authorization;
    console.log(authHeader);
  
    if (!authHeader) {
      return res.status(401).send({
        message: "unauthorized access",
      });
    }
    const token = authHeader.split(" ")[1];
    jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (err, decoded) => {
      if (err) {
        return res.status(403).send({ message: "forbidden access" });
      } else {
        console.log("decoded", decoded);
        req.decoded = decoded;
        next();
      }
    });
  };
  

  Backend login route

    app.post("/login", async (req, res) => {
    const user = req.body;
    const accessToken = jwt.sign(user, process.env.ACCESS_TOKEN_SECRET, {
      expiresIn: "1d",
    });
    res.send({ accessToken });
  });
  

  My Client-side code:

  const handleSubmit = async (e) => {    
  e.preventDefault();
  await signInWithEmailAndPassword(values.email, values.password);
  const email = values.email;
  
  const { data } = await axios.post(
    "https://stark-sands-89628.herokuapp.com/login",
    { email }
  );
  localStorage.setItem("accessToken", data.accessToken)};
  
• How to hide navbar on React Router "Not Found" Routes

  I am building a web application using React.js and using React Router to manage routing. I want to hide my navbar and footers for the 'Not Found' page.

  <Route path='*' element={<NotFound />} />
  

  I see a lot of StackOverflow but it is not working for my application.

  my navber is <Menubar /> and footer <Footer />

  here is my app.js

  function App() {
  return (
  <div>
    <Menubar />
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/home' element={<Home />} />
  
      <Route path='/inventory' element={<RequireAuth>
       <Inventory />
      </RequireAuth>} />
  
      <Route path='/inventory/:inventoryId' element={<RequireAuth>
        <InventoryItem />
      </RequireAuth>} />
  
      <Route path='*' element={<NotFound />} />
    </Routes>
  
    <Footer />
  </div>
  

  ); }

  export default App;
• Issues while trying to pass data from one page to another using Link from React-Router v6

  I have the following Router:

  // index.js  
  
  
  
   import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 
      import history from "./history";
      const root = ReactDOM.createRoot(document.getElementById('root'));
      
      root.render(
      
          <Router history={history}>
              <Routes>
                  <Route path='/Page1' element={<Page1/>} />
                  <Route path='/Page2' element={<Page2/>} />
              </Routes>
          </Router>
      
      );
  
      // history.js
      
          import { createBrowserHistory } from 'history'
          
          export default createBrowserHistory();
  

  I'm trying to pass data from Page1 to Page2 using <Link> from React-Router V6. To be more explicit, I'm doing this because Page1 contains a list of participants, each with an edit button. When the edit button is clicked, Page2 opens. Page2 is a form containing the data of the participant you want to edit. Here is a picture so you can visualize it.

  

  Page1 is a class component while Page2 is a functional component with Hooks so that I can call useLocation(). After I retrieve the data from Page1, I want to pre-complete the form. Page2 is a functional component because in React-Router V6, you can only do this using useLocation() hook, as explained here

  A) Page1 where I'm passing the data to Page2

  //Page1
  
  
  class CandidatesList extends Component {
  
   // ...
  
   listOfParticipants = this.state.listOfParticipants.map((participant) => {
   return(
   <Link to="/Page2" state={{participant: participant}} className="btn btn-primary">Edit Participant</Link> 
   // This is the edit button that opens Page2 while passing the data 
  
   )
  
  
  }
  

  B) Page2 where I'm retrieving the data from Page1

  ///////////// Page2
  
      // ...
  
      function Page2() {
      
      const { state } = useLocation()
      console.log(state.participant) // 
  
      useEffect(() => {
      /// ...
  
      }
  
  }
  

  However, it seems that the data is never received in Page2 and I get the following error (when I try to console.log() it)

  Uncaught TypeError: Cannot read properties of null (reading 'participant')
  

  What am I doing wrong and why is the data not getting passed?
• React/TypeScript app fails to deploy to subdomain (404)

  Hi I made react typescript app. Everything works perfect on localhost and domain, but when I upload same build folder to the subdomain i have 404 error.

  My .htaccess:

  <IfModule mod_rewrite.c>
  
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule . /index.html [L]
  
  </IfModule>
  

  Error msg:

  Not Found The requested URL was not found on this server.

  Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.