свитч для типов

src/create/createQuestion.tsx

@@ -6,6 +6,7 @@ import {
 import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
 import Description from "./description";
 import Settings from "./settings";
+import Types from "./types";
 
 //Значения, собираемые для отправки на бэк
 interface Values {
@@ -30,8 +31,7 @@ const types = [
     {desc:"кнопка", value:"button"},
     {desc:"ничего", value:"none"}
 ]
-
+export const TextField = (props: any) => {
-const TextField = (props: any) => {
 
     const [field, meta, helpers] = useField(props);
 
@@ -217,45 +217,11 @@ export default () => {
                         <VStack>
                             <TextField placeholder="Заголовок" name="title" type="text" />
                             <Description name="description"/>
-                            {
+                            <Types
-                                type === 0 ? //Тип вопроса - текст?
+                                type={type}
-                                    <TextField name="text" placeholder="текст" type="text" />
+                                stockroom={stockroom}
-                                    :
+                                changeFocus={changeFocus}
-                                    type === 3 ? //Тип вопроса - файл?
+                            />
-                                        <input type="file"/>
-                                    :
-                                    stockroom.length === 0 ? //В поле для юзерских данных есть что-то?
-                                        null //Ничего не внесено
-                                        :
-                                        type === 1 ? //Тип вопроса - селект?
-                                            <Select
-                                            >
-                                                {
-                                                    stockroom.map((e: any, i: number) => {
-                                                        return <option key={i}>{e.text}</option>
-                                                    })
-                                                }
-                                            </Select>
-                                            :
-                                            type === 2 ? //Тип вопроса - чекбокс?
-                                                stockroom.map((e:any, i:number) => {
-                                                    return <Checkbox key={i}>{e.text}</Checkbox>
-                                                })
-                                                    :
-                                                    type === 4 ? //Тип вопроса - кнопка?
-                                                        stockroom.map((e:any, i:number) => {
-                                                            return <Button
-                                                                        backgroundColor={e.color}
-                                                                        key={i}
-                                                                        onClick={(event: any) => {
-                                                                            changeFocus(e.id)
-                                                                            event.target.blur()
-                                                                        }}
-                                                                   >{e.text}</Button>
-                                                        })
-                                                        :
-                                                        null //Тип вопроса - ничего
-                            }
                         </VStack>
 
                         <Settings

src/create/settings.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import {Box, Button, Checkbox, Container, Select, Textarea} from "@chakra-ui/react";
+import {Box, Button, Checkbox, Container, Select} from "@chakra-ui/react";
 import Buttons from "./tools/buttons"
-import List from "./tools/list"
 
 export default (props: any) => {
 

src/create/tools/list.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import {Button, VStack, HStack, Textarea, Container, Text, CloseButton} from "@chakra-ui/react";
-
-
-
-export default ({stockroom}: {stockroom: any,}) => {
-    const [color, setColor] = React.useState("#fff")
-
-    return(
-        <HStack>
-            <Button
-
-            >Добавить</Button>
-
-            <Textarea
-                placeholder="описание"
-            />
-
-            <VStack
-                border="1px solid gray"
-                height="100px"
-                minWidth="30%"
-                overflow="auto"
-            >
-                {
-                    stockroom.map((e:any, i:number) => {
-                        return(
-                            <Container border="1px solid lightgray" key={i} display="inline-flex" alignItems="center">
-                                <Text>{e.text}</Text><CloseButton/>
-                            </Container>
-                        )
-                    })
-                }
-            </VStack>
-        </HStack>
-    )
-}

src/create/types.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+    Select, Checkbox, Button,
+} from '@chakra-ui/react'
+import {TextField} from "./createQuestion";
+
+export default (props:any) => {
+    switch(props.type) {
+        case 0://Тип вопроса - текст?
+            return (<TextField name="text" placeholder="текст" type="text" />)
+            break;
+        case 1://Тип вопроса - селект?
+            return (
+                <Select>
+                    {
+                        props.stockroom.map((e: any, i: number) => {
+                            return <option key={i}>{e.text}</option>
+                        })
+                    }
+                </Select>
+            )
+            break;
+        case 2://Тип вопроса - чекбокс?
+            return(
+                <>
+                    {
+                        props.stockroom.map((e:any, i:number) => {
+                            return <Checkbox key={i}>{e.text}</Checkbox>
+                        })
+                    }
+                </>
+            )
+            break;
+        case 3://Тип вопроса - файл?
+            return (<input type="file"/>)
+            break;
+        case 4://Тип вопроса - кнопка?
+            return(
+                <>
+                    {
+                        props.stockroom.map((e:any, i:number) => {
+                            return <Button
+                                backgroundColor={e.color}
+                                key={i}
+                                onClick={(event: any) => {
+                                    props.changeFocus(e.id)
+                                    event.target.blur()
+                                }}
+                            >{e.text}</Button>
+                        })
+                    }
+                </>
+            )
+            break;
+        default:
+            return <></>
+    }
+}

src/index.tsx

@@ -13,7 +13,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
 
-  // <React.StrictMode>
+  <React.StrictMode>
       <ChakraProvider>
           <SnackbarProvider maxSnack={3}>
               <BrowserRouter>
@@ -26,5 +26,5 @@ root.render(
               </BrowserRouter>
           </SnackbarProvider>
         </ChakraProvider>
-  // </React.StrictMode>
+  </React.StrictMode>
 );