I am trying to build my own custom component using React. I am not very familiar with React framework so I might need a little help here. I have also tried my best to search online but to no avail.
So I have a dictionary from my python file:
dic = {'key1':['value1_1','value1_2'],
'key2':['value2_1','value2_2'],}
and I want to parse this to the frontend and render two forms with radio button labeled with the list (eg. value1_1, value1_2 for first form)
I am using material ui and here is the code I run into problem:
{Object.entries(myObject).map(([key,values])=>(
<FormControl component="fieldset">
<FormLabel component="legend">Gender</FormLabel>
<RadioGroup
aria-label="gender"
defaultValue="female"
name={key}
>
{Object.entries(values).map(val => {
return <FormControlLabel value={val.toString()} control={<Radio />} label={val.toString()} />
})}
</RadioGroup>
</FormControl>
))}
Here is the returned error:
Overload 1 of 2, ‘(o: { [s: string]: unknown; } | ArrayLike): [string, unknown]’, gave the following error.
Argument of type ‘unknown’ is not assignable to parameter of type ‘{ [s: string]: unknown; } | ArrayLike’.
Type ‘unknown’ is not assignable to type ‘ArrayLike’.
Overload 2 of 2, ‘(o: {}): [string, any]’, gave the following error.
Argument of type ‘unknown’ is not assignable to parameter of type ‘{}’. TS2769
Hope to get some help here! Thanks so much in advance.