i am trying to customized my code and to add two of select option in a single . When i tried it to set both select option under a div my app shows me error . Don,t know why it is happening to me .Please help .Here is my code
import React, { useState } from 'react';
import { Table, Head, Cell, Text, Row, Checkbox, Button, ModalDialog, Form, Select, Option } from '@forge/react';
import { Fragment } from 'react';
const issues = [
{
key: 'New user onboarding',
status: 'Technical Document',
date:'03-08-2023',
action:'...'
},
{
key: 'Download and install instruction',
status: 'Technical Document',
date:'03-08-2023',
action:'...'
},
{
key: 'Help and Support',
status: 'Technical Document',
date:'03-08-2023',
action:'...'
},
{
key: 'Upselling Feature Update',
status: 'Marketing Copy',
date:'03-08-2023',
action:'...'
},
{
key: 'User Onboarding',
status: 'Technical Document',
date:'03-08-2023',
action:'...'
},
{
key: 'Engagements Modules',
status: 'Marketing Copy',
date:'03-08-2023',
action:'...'
},
];
const Page1 = () => {
const [isOpen, setOpen] = useState(false);
const [selectedKeys, setSelectedKeys] = useState([]);
const handleCheckboxChange = (key) => {
setSelectedKeys(prevSelectedKeys => {
if (prevSelectedKeys.includes(key)) {
return prevSelectedKeys.filter(k => k !== key);
} else {
return [...prevSelectedKeys, key];
}
});
};
return (
<>
<><Text>Welcome to app development</Text></>
<Fragment>
<Button appearance="default" onClick={() => setOpen(true)}>Create Document </Button>
{isOpen && (
<ModalDialog header="Create Document" onClose={() => setOpen(false)}>
<Text>What Document Do You Want To Create?</Text>
<Form
onSubmit={data => {
setSize(data.size);
setOpen(false);
}}
>
<div>
<><Text>Welcome to app development</Text></>
<Select label="T-shirt size" name="size">
<Option label="Small" value="small" />
<Option label="Medium" value="medium" />
<Option label="Large" value="large" />
</Select>
<Select label="T-shirt size" name="size">
<Option label="Small" value="small" />
<Option label="Medium" value="medium" />
<Option label="Large" value="large" />
</Select>
</div>
</Form>
</ModalDialog>
)}
</Fragment>
<Table>
<Head>
<Cell>
</Cell>
<Cell>
<Text>Documents</Text>
</Cell>
<Cell>
<Text>Type</Text>
</Cell>
<Cell>
<Text>Date Generated</Text>
</Cell>
<Cell>
<Text>Actions</Text>
</Cell>
</Head>
{issues.map(issue => (
<Row key={issue.key}>
<Cell>
<Checkbox
isChecked={selectedKeys.includes(issue.key)}
onChange={() => handleCheckboxChange(issue.key)} />
</Cell>
<Cell>
<Text>{issue.key}</Text>
</Cell>
<Cell>
<Text>{issue.status}</Text>
</Cell>
<Cell>
<Text>{issue.date}</Text>
</Cell>
<Cell>
<Text>{issue.action}</Text>
</Cell>
</Row>
))}
</Table>
</>
);
};
export default Page1;