Change the inputs, in order to make it easier to work with the entries of the user

src/Admin/Components/Components/DataCard.js

@@ -29,18 +29,11 @@ import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
 import SaveIcon from "@material-ui/icons/Save";
 import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos";
 import { useStyles } from "../Styles/DataCard";
-import TextField from "@material-ui/core/TextField";
 
-// This file is responsible to display the informations of the api in the file note variables
 const DataCard = (props) => {
     const classes = useStyles();
     const [edit, setEdit] = useState(false);
 
-    // This vars will be used when the state of edit is true, in order to capture the input of the user
-    const [name, setName] = useState(props.data.name);
-    const [code, setCode] = useState(props.data.code);
-    const [weight, setWeight] = useState(props.data.weight);
-
     const buttonArr = [
         {
             label: "Listar",
@@ -85,7 +78,7 @@ const DataCard = (props) => {
                     <div className={classes.displayRow}>
                         <Typography
                             className={classes.title}
-                            color="textprimary"
+                            color="inherit"
                             gutterBottom
                         >
                             {props.data[1].prop}
@@ -104,36 +97,10 @@ const DataCard = (props) => {
                             ))}
                         </ButtonGroup>
                     </div>
-                    <form
-                        style={{ display: "flex", flexDirection: "column", width: "25%" }}
-                    >
-                        <TextField
-                            id="standard-basic"
-                            label="ID *não pode mudar"
-                            value={props.data.id}
-                        />
-                        <div style={{ height: "1em" }}></div>
-                        <TextField
-                            id="standard-basic"
-                            label="Nome"
-                            value={name}
-                            onChange={(event) => setName(event.target.value)}
-                        />
-                        <div style={{ height: "1em" }}></div>
-                        <TextField
-                            id="standard-basic"
-                            label="Código"
-                            value={code}
-                            onChange={(event) => setCode(event.target.value)}
-                        />
-                        <div style={{ height: "1em" }}></div>
-                        <TextField
-                            id="standard-basic"
-                            label="Peso"
-                            value={weight}
-                            onChange={(event) => setWeight(event.target.value)}
-                        />
-                    </form>
+                    
+                    {/* Display the edit area */}
+                    {props.component} 
+
                 </CardContent>
                 <CardActions>
                     <Button size="small" className={classes.displayRow} onClick={saveHandler}>
@@ -148,7 +115,7 @@ const DataCard = (props) => {
                     <div className={classes.displayRow}>
                         <Typography
                             className={classes.title}
-                            color="textprimary"
+                            color="inherit"
                             gutterBottom
                         >
                             {props.data[1].prop}
@@ -167,12 +134,12 @@ const DataCard = (props) => {
                             ))}
                         </ButtonGroup>
                     </div>
-                    {props.data.map((info) => (
-                        <div className={classes.displayColumn}>
-                            <Typography color="textSecondary" className={classes.subTitle}>
+                    {props.data.map((info , index) => (
+                        <div className={classes.displayColumn} key={index}>
+                            <Typography color="initial" className={classes.subTitle}>
                                 {info.subTitle}
                             </Typography>
-                            <Typography>
+                            <Typography color='textSecondary'>
                                 {
                                     info.prop === null ? 'Sem dados' : info.prop
                                 }