redux-form#change JavaScript Examples

function FieldSection({
  change,
  children,
  FieldContainer,
  section,
  formName,
  formValues,
  visibleFieldValues,
  setDisabled,
  index,
}) {
  const showSection = shouldShowSection(formValues, section);
  // Don't update or clear sections that don't have conditions (unconditional or default sections)
  if (section.slug && showSection !== formValues[section.slug]) {
    // Change section status to true/false if visible / hidden.
    change(formName, section.slug, showSection);
    // Clear all dependent values for field to hide further sections / etc.
    if (section.conditions && !showSection) {
      for (const field of section.fields) {
        change(formName, field, null);
      }
    }
  }

  useEffect(() => {
    // When the overall assessment is done, as indicated by certain sections mounting, lock all the questions
    if (showSection && section.slug.startsWith('out')) {
      visibleFieldValues.forEach(() => {
        setDisabled(true);
      });
    }
  }, [section, showSection]);

  const element = useRef(null);
  useLayoutEffect(() => {
    // We do not want to scroll when the first section renders because, on mobile, it may cause the user's screen to
    // scroll past the description at the start.
    if (showSection && index > 0) {
      scrollTo(0, element.current.offsetTop, {
        ease: 'in-cube',
        duration: SCROLL_DURATION,
      });
    }
  }, [showSection]);

  return (
    <div ref={element}>
      {showSection && (
        <React.Fragment>
          {section.showHeader && section.description && (
            <div>
              <MarkdownRenderer value={section.description} />
            </div>
          )}
          {children}
        </React.Fragment>
      )}
    </div>
  );
}

ConnectedFieldSection = connect(mapStateToProps, {change})(FieldSection)