Последовательная нумерация сносок с помощью React

const defaultContext = {
  get: () => [],
  add: () => {
    throw Error(`add called outside of context`)
  }
}

const Context = React.createContext(defaultContext)

function Provider(props) {
  const footnotes = React.useRef([])
  footnotes.current = []
  const add = children => footnotes.current.push(children)
  const get = () => footnotes.current
  return <Context.Provider
    children = {props.children}
    value = {{ add, get }}
  />
}

function Footnote(props) {
  const context = React.useContext(Context)
  const id = context.add(props.children)
  return <sup>[{id}]</sup>
}

function Footnotes() {
  const context = React.useContext(Context)
  return <ul>
    {context.get().map((children, index) => (
      <li key = {index}>
        [{index + 1}]: {children}
      </li>
    ))}
  </ul>
}

function App() {
  return <div>
    <p>
      Hello <Footnote children = "hello" />.
      <Child />
      World <Footnote children = "world" />.
    </p>
    <Footnotes />
  </div>
}

function Child() {
  return <span>More text from the child
    <Footnote children = "more" />
    and a little more <Footnote children = "and more"/>.
  </span>
}

ReactDOM.createRoot(document.querySelector("#app")).render(
  <Provider>
    <App />
  </Provider>
)

<script crossorigin src = "https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id = "app"></div>

const FootnotesContext = React.createContext(null);

function FootnotesProvider({ children }) {
  const [footnotes, setFootnotes] = React.useState([]);
  const footnotesRef = React.useRef([]);

  function addFootnote(html) {
    footnotesRef.current = [...footnotesRef.current, html];
    setFootnotes([...footnotesRef.current, ]);
  }

  function totalFootnotes() {
    return footnotes.length;
  }

  return (
    <FootnotesContext.Provider value = {{ footnotes, addFootnote, totalFootnotes,  }}>
      {children}
    </FootnotesContext.Provider>
  );
}

function useFootnotes() {
  const context = React.useContext(FootnotesContext);

  if (!context) throw new Error('`useFootnotes` must be used within a `FootnotesProvider`.');

  return context;
}

function Article() {
  return (
    <FootnotesProvider>
      <article>
        <p>
          The <FootNote html = "Footnote 1" /> article content here <FootNote html = "Footnote 2" />.
        </p>

        <hr />

        <FootNotesContainer />
      </article>
    </FootnotesProvider>
  );
}

function FootNotesContainer() {
  const { footnotes } = useFootnotes();

  return (
    <div id = "footnotes-container">
      <h2>Footnotes</h2>
      <h3>Total Footnotes: {footnotes.length}</h3>

      {footnotes.map((f, i) => (
        <div className = "footnote" key = {i}>
          <a href = {`#footnote-sup-${i + 1}`} id = {`footnote-${i}`}>
            {i + 1}
          </a>:
          <p>{f}</p>
        </div>
      ))}
    </div>
  );
}

function FootNote({ html }) {
  const { footnotes, addFootnote, totalFootnotes } = useFootnotes();
  // const footnoteRef = React.useRef(null);
  const [index, setIndex] = React.useState(0)

  React.useEffect(() => {
    addFootnote(html);
  }, []);

  React.useEffect(() => {
    setIndex(footnotes.indexOf(html) + 1)
  }, [footnotes])

  return (
    <sup 
      className = "footnote-sup" 
      // ref = {ref => footnoteRef.current = ref}
    >
      <a
        href = {`#footnote-${index}`}
        id = {`footnote-sup-${index}`}
      >
        {index}
      </a>
    </sup>
  )
}

ReactDOM.createRoot(document.getElementById("root")).render(<Article />);

.footnote {
  display: flex;
  gap: 4px;
  align-items: center;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

<div id = "root"></div>

function Article() {
  return (
    <article>
      <p>The<FootNote html = "Footnote 1" /> article content here<FootNote html = "Footnote 2" />.</p>
      <FootNotesContainer />
    </article>
  );
}

function FootNotesContainer() {
  return (
    <div id='footnotes-container'>
      <h2>Footnotes</h2>
    </div>
  );
}

function* generateId() {
  let idCounter = 1;
  while (true) {
    yield idCounter++;
  }
}

const gen = generateId();

function useFootnoteId() {
  const [id, setId] = React.useState(0);

  React.useEffect(() => {
    setId(gen.next().value);
  }, [gen]);

  return id;
}

function FootNote({ html }) {
  const footNoteLink = useFootnoteId();

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/runtime.min.js"></script>

<div id = "root"></div>