e211d752.7dbfe3d6.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{104:function(e,r,t){"use strict";t.d(r,"a",(function(){return u})),t.d(r,"b",(function(){return b}));var n=t(0),o=t.n(n);function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?i(Object(t),!0).forEach((function(r){a(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function c(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var p=o.a.createContext({}),l=function(e){var r=o.a.useContext(p),t=r;return e&&(t="function"==typeof e?e(r):s(s({},r),e)),t},u=function(e){var r=l(e.components);return o.a.createElement(p.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return o.a.createElement(o.a.Fragment,{},r)}},m=o.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,a=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=l(t),m=n,b=u["".concat(i,".").concat(m)]||u[m]||d[m]||a;return t?o.a.createElement(b,s(s({ref:r},p),{},{components:t})):o.a.createElement(b,s({ref:r},p))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var a=t.length,i=new Array(a);i[0]=m;var s={};for(var c in r)hasOwnProperty.call(r,c)&&(s[c]=r[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,i[1]=s;for(var p=2;p<a;p++)i[p]=t[p];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},98:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return a})),t.d(r,"metadata",(function(){return i})),t.d(r,"toc",(function(){return s})),t.d(r,"default",(function(){return p}));var n=t(3),o=(t(0),t(104));const a={id:"errorMessage",title:"ErrorMessage",sidebar_label:"ErrorMessage",slug:"/api/error-message"},i={unversionedId:"errorMessage",id:"errorMessage",isDocsHomePage:!1,title:"ErrorMessage",description:"You can use this component to render an error message for an input. ` will only work if it is a descendant of `.",source:"@site/docs/ErrorMessage.md",slug:"/api/error-message",permalink:"/docs/api/error-message",editUrl:"https://github.com/formstjs/formst-docs/docs/ErrorMessage.md",version:"current",sidebar_label:"ErrorMessage",sidebar:"someSidebar",previous:{title:"Field",permalink:"/docs/api/field"},next:{title:"defineValidators",permalink:"/docs/api/define-validators"}},s=[{value:"API",id:"api",children:[]},{value:"Parameters",id:"parameters",children:[]},{value:"Usage",id:"usage",children:[]}],c={toc:s};function p({components:e,...r}){return Object(o.b)("wrapper",Object(n.a)({},c,r,{components:e,mdxType:"MDXLayout"}),Object(o.b)("p",null,"You can use this component to render an error message for an input. ",Object(o.b)("inlineCode",{parentName:"p"},"<ErrorMessage />")," will only work if it is a descendant of ",Object(o.b)("inlineCode",{parentName:"p"},"<Formst />"),"."),Object(o.b)("h3",{id:"api"},"API"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-tsx"}),"import {ErrorMessage} from 'formst';\n\n<Formst formInstance={formInstance}>\n  <ErrorMessage name=\"field-name\" />\n</Formst>;\n")),Object(o.b)("h3",{id:"parameters"},"Parameters"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{}),"name: string, required\ncomponent: string | React.Component\n")),Object(o.b)("p",null,"Any extra props will be passed down to the child component."),Object(o.b)("h3",{id:"usage"},"Usage"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{}),'<ErrorMessage name="title" component={CustomComponent}>\n')))}p.isMDXComponent=!0}}]);