Async function passed as prop into React component causing @typescript-eslint/no-misused-promises error

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
• NextJS: Error serializing `.data.data` returned from `getServerSideProps`

  I'm new to NextJS. I'm working on a simple page in which I need to retrieve data from my backend app. My backend app is a totally separate app written in go. My undestanding is that I must use getServerSideProps to get data from the server on load, so I've got the following:

  myProject/pages/category/new.js:

  export default function AddNewCategory(data) {
  ...
  }
  
  export const getServerSideProps = async () => {
      const data = await getAllCategories();
      console.log(await data)
      return {
          props: {
              data: { data }
          }
      };
  };
  

  myProject/api/category.js:

  import axios from "axios";
  
  // getAllCategories returns a list of all active categories
  export const getAllCategories = async() => {
  
      axios.get("http://127.0.0.1:8080/api/v1/categories")
          .then(function (response) {
              console.log(response.data)
              return response.data;
          })
          .catch(error => {
              console.error("error")
              console.log(error)
          })
  
  }
  

  As you can see I've got a print statement in getAllCategories which prints:

  {
    data: [
      {
        id: 1,
        name: 'Pop',
        slug: 'pop',
        description: 'Pop',
        parent: 0,
        active: true,
        created_at: '2022-05-03T19:50:00-04:00',
        updated_at: '2022-05-03T19:50:00-04:00',
        deleted_at: null
      },
      {
        id: 3,
        name: 'Pop 2',
        slug: 'pop-2',
        description: 'Pop',
        parent: 0,
        active: true,
        created_at: '2022-05-03T19:50:24-04:00',
        updated_at: '2022-05-03T19:50:24-04:00',
        deleted_at: null
      }
    ]
  }
  

  yet I'm getting the following error:

  error - Error: Error serializing .data.data returned from getServerSideProps in "/category/new". Reason: undefined cannot be serialized as JSON. Please use null or omit this value.

  I saw around that I should try to convert the data to string and then back to json:

  return { 
    props: { 
      data: JSON.parse(JSON.stringify(data)) 
    } 
  };
  

  but when I do this I'm getting a different error:

  error - SyntaxError: Unexpected token u in JSON at position 0

  I'm using next@12.1.5

  Any idea what's going on?
• Is there any way to avoid preflight OPTION request?

  I'm creating a react app using the Laravel API and sending requests through Axios but a preflight OPTION request is sent with every GET or POST request
  although these preflight requests are not causing me any trouble, I just want to get them out of the way.
  I've done enough reading on CORS to know that only simple requests don't need preflight requests, and since my requests contain authorization headers, they are not considered simple.
  I've tried:
  

  1. adding a proxy field to my package.json
     
  2. creating a middleware for preflight requests
     There was no success with any of the above.
     As far as I can tell, this is the only answer that will work, Why is an OPTIONS request sent and can I disable it?, But I have no idea where to add this header: Access-Control-Allow-Origin: *
     Or I can add this: Access-Control-Max-Age: 600 , Yet again, I'm not sure where it belongs. I mean, I am not sending the option request, so how am I supposed to set headers for something I am not even sending?
     Okay, enough with the explaining, here is my post request:
     

  axios.post(`/ticket/create`, formData).then(res => {
              if (res.status === 201) {
                  alert('success')
              } else {
                  alert('request failed')
              }
          })
  

  Here are my axios configs:

  axios.defaults.baseURL = 'http://127.0.0.1:8000/api';
  axios.interceptors.request.use(function (config) {
      const token = localStorage.getItem('auth_token');
      config.headers.Authorization = token ? `Bearer ${token}` : '';
      return config;
  })
  
• In react class based component this.setsate is used but state is not defined in constructor if I have to convert this in functional based then how

  class Dashboard extends Component {
    constructor(props) {
      super(props)
      this.state = {
        assetList: [],
        assetList1: [];
      }
    }
    componentDidMount = async () => {
      const web3 = window.web3
      const LandData=Land.networks[networkId]
      if (LandData) {
        const landList = new web3.eth.Contract(Land.abi, LandData.address)
        this.setState({ landList })
      }
    }
  
    ...
  }
  

  In this code the state for landlist is not defines in constructor but setState is used. If I have to convert the code to a function component, what will be the equivalent code?
• How to Prevent Duplication of React Toastify in Functional Components?

  When I use React-Toast, It always duplication like the Image. How prevent the duplication? Toast Duplication Like This

      const Login = () => {
  
    // ========= Loading ============
    if (loading) {
      return <Loading />;
    }
  
    // ========= Error ============
    if (error) {
      if (error.code === "auth/user-not-found") {
        toast.error("User Not Found !");
      } else if (error.code === "auth/wrong-password") {
        toast.error("Password is Wrong !. ");
      }
    }
  
    if (user) {return <></>}
  };
  
  export default Login;
  
• Node.js Promise.all method not working as expected for saving multiple mongoose documents

  I know of the Model.create(documentsArray) and also Model.bulkSave(documentsArray) mongoose API's.

  I was just experimenting with the Promise.all the following way -

  
  const promises = []
  for(let i=1; i++; i<1000) {
   const promise = new UserModel({userId: Math.random() * 1000}).save()
   promises.push(promise)
  }
  
  console.time('t1')
  await Promise.all(promises)
  console.timeEnd('t1') // takes about 329.189ms
  
  

  If I replace the insertion logic by -

  console.time('t2')
  for(const promise of promises) {
    await promise
  }
  console.timeEnd('t2') // takes about 335.268ms
  

  As commented above both t1 and t2 are nearly same! Why Promise.all don't sends all save requests to the database at once if I understand it correctly. What am I missing here?

  NOTE: above both blocks are meant to
• Best practice using promises chaining in node JS

  I'm little bit confusing in promises. first, I have some ugly code like this:

  async function presence(ctx) {
      try {
          var prsenceData = [];
          var isSuccess = Boolean(false);
          var ckFilePath = "./somepath/cookie.json";
  
          if (!fs.existsSync(ckFilePath)) {
              await menuLogin.login(ctx).then(login => {
                  isSuccess = Boolean(login[0].status);
                  myCk.saveCookies(login[0].cookies, ckFilePath);
                  if (!isSuccess) {
                      myCk.deleteCookies(ckFilePath);
                      return false;
                  }
              });
          } else {
              await myCk.checkToDelete(ckFilePath).then(isDel => {
                  if (isDel) {
                      return false;
                  }
              });
          }
          await presenceNow.check(fs.existsSync(ckFilePath), ctx).then(data => {
              for (let id = 0; id < data[0].pesan.length; id++) {
                  console.log(data[0].pesan[id]);
              }
              for (let id = 0; id < data[0].id.length; id++) {
                  presenceData.push(data[0].id);
              }
              if (data[0].pesan.length == 0 && fs.existsSync(ckFilePath)) {
                  myCk.deleteCookies(ckFilePath);
              }
          });
      } catch (e) {
          console.log(e);
      }
  
      return presenceData;
  }
  

  Can anyone explain why presenceNow.check() function is not calling if my ckFilePath does not exist? but if myCkFilePath is exist, my code run so well. And maybe anyone can show me the better code for that case? thanks.
• can we make synchronous task asynchronous so that we don't invest our whole node process doing the one heavy task and instead continue other tasks?

  I have the following code

  
  async function func2() {
      const promise = new Promise((res,rej) => {
          const arr = new Array(10000000).fill('hehehehe');
          const arr2 = JSON.stringify(arr);
          const arr3 = new Array(10000000).fill('hehehehe');
          return res('Completed Execution Of function @2');
      })
      return promise
  }
  
  async function func1() {
      const promise = new Promise((res,rej) => {
          const arr = [1,2,3];
          const stringified = JSON.stringify(arr);
          return res('Completed Execution of function @1');
      })
      return promise
  }
  
  func2().then(res => console.log(res))
  func().then(res => console.log(res))
  
  console.log('I am After Part')
  
  

  The output of Above script is

  

  As per my understanding, both function calls are passed to some services behind the scenes but func1 should get resolved first as there are no heavy calculations, but we see in output func2's response gets printed first and later func1's, What is the reason behind it??

  Also, can we purposefully build this behavior in any other way??