Here is my layout tsx: where I am using outlet.

import { FormRegister } from '@stonehenge/forms';
import { HeaderPublic } from '@stonehenge/header-public';
import { ModalLogin } from '@stonehenge/modals';
import { useState } from 'react';
import { Outlet } from 'react-router-dom';
import { HeaderPublicLinkSchema } from './header-link.schema';
import layoutStyle from './layout-public.module.scss';

export function LayoutPublic() {
  const [modalActive, setModalActive] = useState<boolean>(true);

  return (
    <section className={layoutStyle['app-wrapper']}>
      <header className="app-header">
        <ModalLogin isModal={modalActive} children={<FormRegister />} />
        <HeaderPublic schema={HeaderPublicLinkSchema} />
      </header>
      <main className="app-main">
        <h1>Hi {modalActive}</h1>
        <Outlet context={setModalActive} />
      </main>
      <footer className="app-footer"></footer>
    </section>
  );
}

export default LayoutPublic;

Here I am trying to use the outlet context but getting above error:

import { Button } from 'antd';
import { Dispatch, SetStateAction } from 'react';
import { useOutletContext } from 'react-router-dom';
import styles from './admin-register.module.scss';
export function AdminRegister() {
  const [setModalActive] =
    useOutletContext<Dispatch<SetStateAction<boolean>>>();error is here
  return (
    <div className={styles['container']}>
      <h1>Welcome to AdminRegister!</h1>
      <Button onClick={() => setModalActive(true)}>Register</Button>
    </div>
  );
}

export default AdminRegister;

The error:

Type Dispatch<SetStateAction<boolean>> must have a [Symbol.iterator]() method that returns an iterator.ts(2488)

Can anyone help me to understand the issue please?

CodePudding user response：

const [setModalActive] =

You're destructuring this as though you expect useOutletContext to return an array, but it's just returning a function. Change it to:

const setModalActive =