How to display array data in form field in Ionic ReactJS? - arrays

Question

I have some data fetched from Laravel API and stored in an array. I would like to display the value of the data in the form field so that users can edit the value. The array is as follows:
Array Data
I can display the other field data e.g si_t_street1 that is not being stored in an array simply by using the variable name as the property value of 'name' of the field.
Data Not Stored In Array
Below is the snippet of my code:
import React, { useContext, useEffect, useState } from 'react';
import { useForm } from "react-hook-form";
import { yupResolver } from '#hookform/resolvers/yup';
import * as Yup from 'yup';
import * as api from '../../services/api';
import { IonHeader, IonToolbar, IonButtons, IonBackButton, IonTitle, IonContent, IonButton, IonAlert, IonLoading, IonModal } from '#ionic/react';
import { NavContext } from "#ionic/react";
const AbroadApp: React.FC = (props: any) => {
const { id } = props.match.params.id ?? ``;
const isAddMode = (props.match.params.id) ? false : true;
const { register, handleSubmit, reset, setValue, errors, formState } = useForm({
resolver: yupResolver(validationSchema)
});
function onSubmit(data: any) {
return isAddMode
? createRegAbroad(data)
: updateRegAbroad(id, data);
}
useEffect(() => {
if (!isAddMode) {
api.getRegAbroadById(props.match.params.id).then(regAbroad => {
let fields = [
'si_t_street1',
'si_t_street2',
'si_t_street3',
'street1'
];
let regAbroadArr: any = [];
regAbroadArr.push(regAbroad.data.data);
fields.map(field => {
setValue(field, regAbroadArr[0][field])
})
setLoading(false)
});
}
}, []);
return (
<>
<IonContent>
<form onSubmit={handleSubmit(onSubmit)} onReset={reset}>
<input name="id" ref={register} type="hidden" autoComplete="off" />
<div className="row">
<div className="col-12">
<label>
Street 1{" "}
<span className="text-danger">*</span>
</label>
<div className="form-group">
<input name="si_t_street1" ref={register} className={`form-control ${errors.si_t_street1 ? 'is-invalid' : ''}`} type="text" autoComplete="off" />
<div className="invalid-feedback">
{errors.si_t_street1?.message}
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<label>
Street 1{" "}
<span className="text-danger">*</span>
</label>
<div className="form-group">
<input name="street1" ref={register} className={`form-control ${errors.street1 ? 'is-invalid' : ''}`} type="text"
autoComplete="off" value={country[0].street1} />
<div className="invalid-feedback">
{errors.street1?.message}
</div>
</div>
</div>
</div>
</form>
</IonContent>
</>
);
}
export default AbroadApp;
I tried getting the value of street1 property of the country array but the above code throws an error: cannot find name 'Country'. What is the right way to get the value to display?

Answer 1

It's unclear where you've defined your "country" variable.