I am relatively new to react but i need to create a pretty hard modal component. I need to fetch some parameters from an api and loop through an object and match the parameters to the right place in the object, the thisAction-mapping. Also the there are one parameter for every object that contain och will contain a date and that should not be visible, that is why i have the if-statement.
For some reason i cannot change the values for the parameters, there must be something wrong with the onChange or when i copy some list.
import { useState, useEffect } from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import Modal from 'react-bootstrap/Modal';
import { fetchSomeData } from '../../utils/apiGet';
import { UpdateRequestActionParameter } from '../../utils/apiPut';
import { CreateRequestActionParameter } from '../../utils/apiPost';
import { useTranslation } from 'react-i18next';
import { RequestActionType, RequestActionResult, RequestType, Result, requestActionParameter, Action} from '../../utils/interface';
import Separator from '../../components/separator/separator.component';
import { useParams } from 'react-router-dom';
interface CurrentData {
Uuid: string;
Name: string;
Description: string;
IsFirstAction: boolean;
MaxMinutesInStep: number;
RequestUuid: string;
currentActionTypeUuid: string;
currentActionTypeValue: string;
Index: number;
Type: { Name: string };
}
const EditRequestActionModal: React.FC<{ currentData: CurrentData; currentActionType: RequestActionType; requestActionResults: RequestActionResult; actionClassType: RequestType[] }> = ({ currentData, currentActionType, requestActionResults, actionClassType }) => {
const productId = useParams();
const [uuid, setUuid] = useState("");
const [show, setShow] = useState(false);
const [selectedActionType, setSelectedActionType] = useState(currentActionType.ActionClassName); //Värdet på actionType (2)
const [selectedRequestActionType, setSelectedRequestActionType] = useState(currentActionType.Name); //Värdet på requestActionType (3)
const [action, setAction] = useState<Action[]>([]);//Lista av requestActionTypes (3)
const [chosenAction, setChosenAction] = useState<Result[]>([]);
const [paramArray, setParamArray] = useState<requestActionParameter[]>([]);
const updatedParamArray = [...paramArray];
const { t, i18n } = useTranslation();
useEffect(() => {
const lng = navigator.language;
i18n.changeLanguage(lng);
}, [])
//API-anrop
useEffect(() => {
if (selectedActionType) {
fetchSomeData(`api/Action/${selectedActionType}`)
.then(apiData => {
if (!Array.isArray(apiData)) {
apiData = [apiData];
}
setChosenAction(apiData[0].Results)
setAction(apiData);
})
.catch(error => console.error("Error fetching requests:", error));
}
}, [selectedActionType]);
useEffect(() => {
fetchSomeData(`api/RequestActionParameter/requestaction/${productId.productId}`)
.then(apiData => {
setParamArray(apiData);
})
.catch(error => console.error("Error fetching data:", error));
}, [`api/RequestActionParameter/requestaction/${productId.prpductId}`]);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const handleSend = () => {
if (paramArray.length === 0) {
CreateRequestActionParameter(uuid, paramArray);
} else {
UpdateRequestActionParameter(paramArray);
}
setShow(false);
};
return (
<>
<Button variant="primary" onClick={handleShow}>
{t('button.edit') + " action"}
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>{t('button.edit') + " action"} </Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
{
selectedRequestActionType != "" &&
action.map((thisAction, index) => (
<div key={index}>
<Separator name="Automation Options"></Separator>
<Form.Group key={index}>
{thisAction.Parameters.map((para, paraIndex) => {
const rightPara = paramArray.find(thisPara => thisPara.ActionClassParameterUuid === para.Uuid);
//console.log(rightPara?.Value)
if (para.Type !== "System.DateTime") {
return (
<div key={paraIndex}>
<Form.Label>{para.Name}</Form.Label>
<Form.Control
autoFocus
value={rightPara?.Value}
onChange={(e) => {
updatedParamArray[paraIndex] = {
Value: e.target.value,
ActionClassParameterUuid: para.Uuid,
Active: true,
Uuid: rightPara?.Uuid || ""
};
setParamArray(updatedParamArray);
}}
/>
</div>
);
}
else if (para.Type === "System.DateTime") {
if (paramArray.length === 0) {
let newDate = new Date();
const offset = newDate.getTimezoneOffset();
newDate = new Date(newDate.getTime() + (offset * 60 * 1000));
updatedParamArray[paraIndex] = {
Value: newDate.toISOString().split('T')[0].toString(),
ActionClassParameterUuid: para.Uuid,
Active: true,
Uuid: ''
};
}
}
})}
</Form.Group>
</div>
))
}
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
{t('modal.close')}
</Button>
<Button variant="primary" onClick={handleSend}>
{t('modal.update')}
</Button>
</Modal.Footer>
</Modal>
</>
);
}
export default EditRequestActionModalI receive this error message when i try to change a value the first time:
Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.