import { useContext } from 'react';
import { FieldNameContext } from './FieldNameContext';

/** Hidden `<div/>` that acts as an anchor to scroll to when a form error occurs. */
export default function FieldErrorScrollTarget() {
  const name = useContext(FieldNameContext);
  if (!name) {
    return null;
  }
  const divId = `${name.toLowerCase()}-error-scroll-target`;
  return <div id={divId} style={{ display: 'none' }} />;
}