validateProperty() — react Function Reference

Architecture documentation for the validateProperty() function in ReactDOMUnknownPropertyHook.js from the react codebase.

Function javascript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ validateProperty() — react Function Reference

Dependency Diagram

graph TD
  bb8c41ed_876b_b3f5_04bd_024d69716e5a["validateProperty()"]
  7bf34687_c093_d285_ad96_da146989d7e6["ReactDOMUnknownPropertyHook.js"]
  bb8c41ed_876b_b3f5_04bd_024d69716e5a -->|defined in| 7bf34687_c093_d285_ad96_da146989d7e6
  bf4f5581_ded9_1593_5867_5715d4ea88fa["warnUnknownProperties()"]
  bf4f5581_ded9_1593_5867_5715d4ea88fa -->|calls| bb8c41ed_876b_b3f5_04bd_024d69716e5a
  style bb8c41ed_876b_b3f5_04bd_024d69716e5a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js lines 23–334

function validateProperty(tagName, name, value, eventRegistry) {
  if (__DEV__) {
    if (hasOwnProperty.call(warnedProperties, name) && warnedProperties[name]) {
      return true;
    }

    const lowerCasedName = name.toLowerCase();
    if (lowerCasedName === 'onfocusin' || lowerCasedName === 'onfocusout') {
      console.error(
        'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' +
          'All React events are normalized to bubble, so onFocusIn and onFocusOut ' +
          'are not needed/supported by React.',
      );
      warnedProperties[name] = true;
      return true;
    }

    // Actions are special because unlike events they can have other value types.
    if (typeof value === 'function') {
      if (tagName === 'form' && name === 'action') {
        return true;
      }
      if (tagName === 'input' && name === 'formAction') {
        return true;
      }
      if (tagName === 'button' && name === 'formAction') {
        return true;
      }
    }
    // We can't rely on the event system being injected on the server.
    if (eventRegistry != null) {
      const {registrationNameDependencies, possibleRegistrationNames} =
        eventRegistry;
      if (registrationNameDependencies.hasOwnProperty(name)) {
        return true;
      }
      const registrationName = possibleRegistrationNames.hasOwnProperty(
        lowerCasedName,
      )
        ? possibleRegistrationNames[lowerCasedName]
        : null;
      if (registrationName != null) {
        console.error(
          'Invalid event handler property `%s`. Did you mean `%s`?',
          name,
          registrationName,
        );
        warnedProperties[name] = true;
        return true;
      }
      if (EVENT_NAME_REGEX.test(name)) {
        console.error(
          'Unknown event handler property `%s`. It will be ignored.',
          name,
        );
        warnedProperties[name] = true;
        return true;
      }
    } else if (EVENT_NAME_REGEX.test(name)) {
      // If no event plugins have been injected, we are in a server environment.
      // So we can't tell if the event name is correct for sure, but we can filter
      // out known bad ones like `onclick`. We can't suggest a specific replacement though.
      if (INVALID_EVENT_NAME_REGEX.test(name)) {
        console.error(
          'Invalid event handler property `%s`. ' +
            'React events use the camelCase naming convention, for example `onClick`.',
          name,
        );
      }
      warnedProperties[name] = true;
      return true;
    }

    // Let the ARIA attribute hook validate ARIA attributes
    if (rARIA.test(name) || rARIACamel.test(name)) {
      return true;
    }

    if (lowerCasedName === 'innerhtml') {
      console.error(
        'Directly setting property `innerHTML` is not permitted. ' +