React Form - Customize Fields at Runtime

The Form component allows you to add/remove items and specify item visibility at runtime. The Form only updates the affected items and does not re-render the entire form.

In this demo, the "Show Address" checkbox specifies the visibility of address-related fields. Review the component's code to see how to set the "HomeAddress" group's visible attribute.

Click the "Add phone" button to add a new phone editor. This action adds a new item to the items array of the "phones" group. Each phone editor contains a button that deletes it from the items array and the Form.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

import React, { useCallback, useMemo, useState } from 'react'; import 'devextreme-react/text-area'; import Form, { GroupItem, SimpleItem, Label, ButtonItem, } from 'devextreme-react/form'; import service from './data.ts'; const employee = service.getEmployee(); const App = () => { const [phones, setPhones] = useState(employee.Phones); const [isHomeAddressVisible, setIsHomeAddressVisible] = useState(true); const formData = useMemo(() => ({ ...employee, Phones: phones }), [phones]); const CheckBoxOptions = useMemo(() => ({ text: 'Show Address', value: isHomeAddressVisible, onValueChanged: (e) => { setIsHomeAddressVisible(e.component.option('value')); }, }), [setIsHomeAddressVisible, isHomeAddressVisible]); const generateNewPhoneOptions = useCallback((index: number) => ({ mask: '+1 (X00) 000-0000', maskRules: { X: /[01-9]/ }, buttons: [{ name: 'trash', location: 'after', options: { stylingMode: 'text', icon: 'trash', onClick: () => { const newPhones = phones.slice(0, index).concat(phones.slice(index + 1)); setPhones(newPhones); }, }, }], }), [phones]); const PhoneOptions = useMemo(() => { const options: any[] = []; for (let i = 0; i < phones.length; i += 1) { options.push(generateNewPhoneOptions(i)); } return options; }, [phones, generateNewPhoneOptions]); const PhoneButtonOptions = useMemo(() => ({ icon: 'add', text: 'Add phone', onClick: () => { setPhones((prevPhones) => [...prevPhones, '']); }, }), []); return ( <React.Fragment> <div className="long-title"><h3>Personal details</h3></div> <div className="form-container"> <Form colCount={2} id="form" formData={formData}> <GroupItem> <GroupItem> <GroupItem caption="Personal Data"> <SimpleItem dataField="FirstName" /> <SimpleItem dataField="LastName" /> <SimpleItem editorType="dxCheckBox" editorOptions={CheckBoxOptions} /> </GroupItem> </GroupItem> <GroupItem> <GroupItem caption="Home Address" name="HomeAddress" visible={isHomeAddressVisible}> <SimpleItem dataField="Address" /> <SimpleItem dataField="City" /> </GroupItem> </GroupItem> </GroupItem> <GroupItem caption="Phones" name="phones-container"> <GroupItem name="phones"> {PhoneOptions.map((phone, index: number) => <SimpleItem key={`Phones${index}`} dataField={`Phones[${index}]`} editorOptions={phone}> <Label text={`Phone ${index + 1}`} /> </SimpleItem>)} </GroupItem> <ButtonItem horizontalAlignment="left" cssClass="add-phone-button" buttonOptions={PhoneButtonOptions}> </ButtonItem> </GroupItem> </Form> </div> </React.Fragment> ); }; export default App;

import React, { useCallback, useMemo, useState } from 'react'; import 'devextreme-react/text-area'; import Form, { GroupItem, SimpleItem, Label, ButtonItem, } from 'devextreme-react/form'; import service from './data.js'; const employee = service.getEmployee(); const App = () => { const [phones, setPhones] = useState(employee.Phones); const [isHomeAddressVisible, setIsHomeAddressVisible] = useState(true); const formData = useMemo(() => ({ ...employee, Phones: phones }), [phones]); const CheckBoxOptions = useMemo( () => ({ text: 'Show Address', value: isHomeAddressVisible, onValueChanged: (e) => { setIsHomeAddressVisible(e.component.option('value')); }, }), [setIsHomeAddressVisible, isHomeAddressVisible], ); const generateNewPhoneOptions = useCallback( (index) => ({ mask: '+1 (X00) 000-0000', maskRules: { X: /[01-9]/ }, buttons: [ { name: 'trash', location: 'after', options: { stylingMode: 'text', icon: 'trash', onClick: () => { const newPhones = phones.slice(0, index).concat(phones.slice(index + 1)); setPhones(newPhones); }, }, }, ], }), [phones], ); const PhoneOptions = useMemo(() => { const options = []; for (let i = 0; i < phones.length; i += 1) { options.push(generateNewPhoneOptions(i)); } return options; }, [phones, generateNewPhoneOptions]); const PhoneButtonOptions = useMemo( () => ({ icon: 'add', text: 'Add phone', onClick: () => { setPhones((prevPhones) => [...prevPhones, '']); }, }), [], ); return ( <React.Fragment> <div className="long-title"> <h3>Personal details</h3> </div> <div className="form-container"> <Form colCount={2} id="form" formData={formData} > <GroupItem> <GroupItem> <GroupItem caption="Personal Data"> <SimpleItem dataField="FirstName" /> <SimpleItem dataField="LastName" /> <SimpleItem editorType="dxCheckBox" editorOptions={CheckBoxOptions} /> </GroupItem> </GroupItem> <GroupItem> <GroupItem caption="Home Address" name="HomeAddress" visible={isHomeAddressVisible} > <SimpleItem dataField="Address" /> <SimpleItem dataField="City" /> </GroupItem> </GroupItem> </GroupItem> <GroupItem caption="Phones" name="phones-container" > <GroupItem name="phones"> {PhoneOptions.map((phone, index) => ( <SimpleItem key={`Phones${index}`} dataField={`Phones[${index}]`} editorOptions={phone} > <Label text={`Phone ${index + 1}`} /> </SimpleItem> ))} </GroupItem> <ButtonItem horizontalAlignment="left" cssClass="add-phone-button" buttonOptions={PhoneButtonOptions} ></ButtonItem> </GroupItem> </Form> </div> </React.Fragment> ); }; export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

.form-container { margin: 10px 10px 30px; } .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; } .add-phone-button { margin-top: 10px; }