udpate

src/App.js

@@ -70,7 +70,7 @@ function App() {
 	}
 
 	const addSection = () => {
-		setState({ sections: [...state.sections, { name: "Nouvelle section", categories: [] }] });
+		setState({ ...state, sections: [...state.sections, { name: "Nouvelle section", categories: [] }] });
 	}
 
 	const deleteSection = i => () => {
@@ -82,6 +82,7 @@ function App() {
 		let sections = Object.assign(state.sections);
 		sections[i] = update;
 		setState({
+			...state,
 			sections: sections
 		});
 	}

src/Category.jsx

@@ -66,8 +66,8 @@ export default function Category(props) {
                         <Typography className={classes.heading}>{category.name}</Typography>
                     </ExpansionPanelSummary>
                     <ExpansionPanelDetails>
-                        <Grid container>
-                            <Grid item xs={12} md={10}>
+                        <Grid container spacing={2}>
+                            <Grid item xs={12} md={8}>
                                 <TextField
                                     id="name"
                                     label="Nom de la categorie"
@@ -79,6 +79,20 @@ export default function Category(props) {
                                     fullWidth
                                 />
                             </Grid>
+                            <Grid item xs={12} md={4}>
+                                <TextField
+                                    id="coeff"
+                                    label="Coefficient"
+                                    value={category.coeff}
+                                    onChange={handleChange}
+                                    type="number"
+                                    InputLabelProps={{
+                                        shrink: true,
+                                    }}
+                                    margin="normal"
+                                    variant="outlined"
+                                />
+                            </Grid>
 
                             <Grid item xs={12} md={10}>
                                 {category.subCategories.map((sc, i) =>

src/Section.jsx

@@ -36,7 +36,7 @@ export default function SimpleExpansionPanel(props) {
     }
 
     const addCategory = () => {
-        setSection({ ...section, categories: [...section.categories, { name: "Nouvelle catégorie", subCategories: [] }] })
+        setSection({ ...section, categories: [...section.categories, { name: "Nouvelle catégorie", coeff: 1, subCategories: [] }] })
     }
 
     const deleteCategory = i => () => {

src/SubCategory.jsx

@@ -54,12 +54,6 @@ export default function SubCategory(props) {
                     </ExpansionPanelSummary>
                     <ExpansionPanelDetails>
                         <Grid container justify="flex-end" alignItems="center" className={classes.root} spacing={2}>
-                            <Grid item xs={12} md={10}>
-                                <Divider />
-                                <Typography variant="h6" component="h5">
-                                    {subCategory.name}
-                                </Typography>
-                            </Grid>
                             <Grid item xs={12} md={10}>
                                 <TextField
                                     id="name"
@@ -72,6 +66,7 @@ export default function SubCategory(props) {
                                     fullWidth
                                 />
                             </Grid>
+                            {subCategory.type === "" &&
                                 <Grid item xs={12} md={4}>
                                     <TextField
                                         id="coeff"
@@ -86,6 +81,7 @@ export default function SubCategory(props) {
                                         variant="outlined"
                                     />
                                 </Grid>
+                            }
                             <Grid item xs={12} md={3}>
                                 <FormControlLabel
                                     value="top"
@@ -116,6 +112,8 @@ export default function SubCategory(props) {
                                     labelPlacement="top"
                                 />
                             </Grid>
+                            {subCategory.type === "" &&
+                                <>
                                     <Grid item xs={12} md={5}>
                                         <TextField
                                             id="upper"
@@ -140,7 +138,8 @@ export default function SubCategory(props) {
                                             fullWidth
                                         />
                                     </Grid>
-
+                                </>
+                            }
                             <Grid item xs={12} md={10}>
                                 <Danger
                                     size="small"