I have wrapped a <textarea /> tag as a react component which sits inside of an Ant Design Form.Item like so:
<Form.Item
name="query"
label="Query"
>
<CodeEditor />
</Form.Item>
the issue is that when I submit the form, the value for "query" is undefined.
If I replace <CodeEditor /> with the text area code like so:
<Form.Item
name="query"
label="Query"
>
<textarea />
</Form.Item>
the "query" value is set correctly.
How should one wrap form tags in React so that their native props/functions are exposed? I would expect refs to work here but I assume there is a better approach.
EDIT
CodeSandbox example. If you enter some text into the CodeEditor input and click the "Console Log Query" button, "undefined" will be logged. But if you replace on line 22 with <textarea /> the query value will be logged.
Instead os using:
<Form.Item
name="query"
label="Query"
>
<textarea />
</Form.Item>
You can try this component imported from antd as shown below:
import { Input } from 'antd';
const { TextArea } = Input;
<Form.Item
name="query"
label="Query"
>
<TextArea />
</Form.Item>
If you want to use custom component as a children of Form.Item you should provide value and onChange props to it, because Form.Item will use them for changing the Form Instance.
In your case the code of CodeEditor component will look like this:
function CodeEditor({ value, options, readOnly, onChange }) {
const textRef = React.useRef();
return (
<Editor
value={value}
ref={textRef}
language="sql"
placeholder="Please enter SQL code."
onChange={onChange}
padding={15}
style={{
backgroundColor: "#f5f5f5",
fontFamily:
"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
fontSize: 16
}}
/>
);
}