Parsing dictionary to Streamlit component

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.

This is where you crack open the browser dev tools and debug the structure and type of myObject. You should also console.log it. Make sure you’re not sending it as a json string from python to javascript, but as a json-serializable object. That way, it’ll be more naturally deserializable in the front end.

HTH.

Hi,

Thanks so much for your reply. I think I have found the solution.

{Object.keys(greet).map((key)=>(
  <FormControl component="fieldset">
    <FormLabel component="legend">Gender</FormLabel>
    <RadioGroup
      aria-label="gender"
      defaultValue="female"
      name={key}
    >
      {greet[key] && greet[key].map((i:string)=>
        <FormControlLabel value={i} control={<Radio />} label={i}></FormControlLabel>
      )}
    </RadioGroup>
  </FormControl>
))}
1 Like