Very new to react hook forms here, and I'm having trouble displaying JSON data retrieved from an API call.
Here's my page:
class UserDataPage extends Component {
constructor(props) {
super(props);
this.state = {userId: localStorage.getItem("userId") || "", newData: {}, dataId: "", isLoading: false};
}
dbGetData = async function (userId) { // Get Data from API here
/* {daily: {last_received_utc: "date", radios:[
{id: "ID_001", frequency: "d", progress: 0, progress_max: 5, exp: 1000},
{id: "ID_002", frequency: "f", progress: 0, progress_max: 1, exp: 1000},
]},
monthly: {same as daily, but more}} */
return response.data;
};
componentDidMount() {
if (this.state.userId.length > 0) {
this.setState({isLoading: true});
this.dbGetData(this.state.userId).then((data) => {
this.setState({isLoading: false});
this.setState({dataId: JSON.parse(data[0].id)});
this.setState({newData: JSON.parse(data[0].data)});
});
}
}
render() {
const { isLoading, dataId, newData } = this.state;
return (
<Container className={this.props.className}>
<Box paddingBottom={5}>
{isLoading && <Spinner animation="border" />}
<Accordion defaultActiveKey="daily_challenge">
<UserRadioForm dataId={dataId} newData={newData}/>
</Accordion>
</Box>
</Container>
);
}
}
UserDataPage.propTypes = { formData: PropTypes.object };
export default styled((UserDataPage)) ({
"& .jumbo": {
WebkitTextStroke: "2px black",
color: "white",
fontWeight: "bold",
// backgroundImage: "radial-gradient(#ffecb3, #cddc39)"
}
});
And here's my form:
const UserRadioForm = (data) => {
let dataId = data.dataId;
let newData = data.newData;
const { register, control, handleSubmit, errors } = useForm({ defaultValues: newData });
const {fields, remove, append} = useFieldArray({control, name: "daily.radios"});
const onSubmit = (data) => {console.log(data);};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Button type="submit" style={{ marginLeft: "auto" }}>Save Changes</Button>
<Card>
<Card.Header>
Daily
</Card.Header>
<Card.Body>
Last Received Date:
<input name={"dailylastRcvdDateRequired"} ref={register({ required: true })} defaultValue={newData.daily.last_received_utc} />
{/* errors will return when field validation fails */}
{errors.dailylastRcvdDateRequired && <span>This field is required</span>}
{fields.map((item, index) => { return (
<Box key={index}>
<Card.Header>ID: {item.id}</Card.Header>
<Card.Body>
Frequency:
{frequency[item.frequency] || item.frequency}
Progress:
<input name={`daily.radios[${index}].progress`} defaultValue={`${item.progress}`} ref={register({required: true})}/>
Max Progress:
<input name={`daily.radios[${index}].progress_max`} defaultValue={`${item.progress_max}`} ref={register({required: true})}/>
Experience:
<input name={`daily.radios[${index}].exp`} defaultValue={`${item.exp}`} ref={register({required: true})}/>
</Card.Body>
</Box>
);
})}
</Card.Body>
</Card>
</form>
);
}
export default UserRadioForm;
The problem I'm having is that fields in UserChallengeForm doesn't seem to have anything in it. I console.log it out before I set it as defaultValues, and it does have some values there, but for some reason it just doesn't take. And thus with fields empty, the form is never really spawned (.map fails). Is there anything I missed?
Also, this is only taking daily radios into account. I have no idea how to show monthly. A second fields?