Tag Archives forreact

Typescript: Not all constituents of type ‘boolean | (() => void)’ are callable

The full error:

This expression is not callable.  Not all constituents of type 'boolean | (() => void)' are callable.    Type 'false' has no call signatures.  TS2349

This is the code that was triggering the error:

export const useLoading = (defaultValue: boolean = false) => {
    const [loading, setLoading ] = useState(defaultValue)

    const startLoading = () => setLoading(true)
    const stopLoading = () => setLoading(false)

    return [
        loading,
        startLoading,
        stopLoading
    ]
}

CAUSE: the return of the array. Having arrays without a specific type gave me this error as wel: Line 0: Parsing error: : Cannot read property ‘map’ of undefined. The solution was to typehint the array.

SOLUTION: don’t return the array just like that, add ‘as const` at the end of that return statement.

export const useLoading = (defaultValue: boolean = false) => {
    const [loading, setLoading ] = useState(defaultValue)

    const startLoading = () => setLoading(true)
    const stopLoading = () => setLoading(false)

    return [
        loading,
        startLoading,
        stopLoading
    ] as const
}

This is the post that showed me where to find it: https://github.com/microsoft/TypeScript/issues/35423

Line 0: Parsing error: : Cannot read property ‘map’ of undefined

the error displayed: Cannot read property 'map' of undefined

If you’re using React and typescript, try these few actions:

  1. Reinstall the dependencies: rm -rf node_modules; yarn install
  2. Remove the cache that’s inside the build directory: remove the build directory and restart the node service
  3. This did it for me (and Trat Westerholt) : don’t type your variables/constants as ‘bare’ arrays:

This failed:

// don't do this - a 'bare' array as type
const customers: [] = []

SOLUTION: It was fixed by:

// add a type to the array
const customers: string[] = []

Add toast messages to your React app

It’s nice to have good looking messages in your app. You can have this too with react-toastify.

react-toastify example

To have these toast messages in your app, do the following:

yarn add react-toastify

Then, in your toplevel file (sth like index.js or App.js, etc.);

import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App(){
    const notify = () => toast("Wow so easy !");

    return (
      <div>
        <button onClick={notify}>Notify !</button>
        <ToastContainer />
      </div>
    );
  }