How do I use nested map statements in React?-CodePudding

I'm trying to loop through my data structure. I have nested arrays and I'm trying to use a nested map function in my JSX to get access to it. I'm not getting any errors in my terminal and I'm consoling my object to make sure it's correct and it's returning as expected. The problem is it's not rendering. I think the problem is with my syntax. The second map function doesn't highlight the same way the first one does.

Is this happening because I have two nested if statements? What am I doing wrong?

    <form onSubmit={methods.handleSubmit(onSubmit)}>
      {myForm.controls.map((form, index) => {
        if (form.type === 'text') {
          return (
            <section key={form.prop}>
              <TextInput
                {...form}
                {...errors}
              />
            </section>
          );
        }
        
        if (form.type === 'multi') {
          {form.multiTypes.map(multi => {
            if (multi.type === 'text') {
              return (
                <section key={form.prop}>
                  <TextInput
                    {...form}
                  />
                </section>
              );
            }
          })}
        }
      })}
      <input type="submit" />
    </form>

// data structure

export const FORM: Form = {
  step_1: {
    controls: [
      {
        question: 75, 
        label: 'Primary federal regulator',
        prop: 'question_75',
        style: '',
        type: 'dropdown',
        placeholder: 'Please select one',
        options: [
          {
            label: 'FCC',
            value: 'FCC',
          },
          {
            label: 'FDA',
            value: 'FDA',
          },
        ],
      },
     
      {
        question: 80,
        label: 'Type of Financial Institution',
        prop: 'question_80',
        style: '50%',
        type: 'multi',
        multiTypes: [
          {
            label: '',
            prop: 'question_80',
            style: '50%',
            type: 'text',
          },
          {
            label: '',
            prop: 'question_80',
            style: '50%',
            type: 'dropdown',
          },
        ],

      },


    ],
  },
};

CodePudding user response：

I believe you're not returning anything from your nested map callback:

<form onSubmit={methods.handleSubmit(onSubmit)}>
      {myForm.controls.map((form, index) => {
        if (form.type === 'text') {
          return (
            <section key={form.prop}>
              <TextInput
                {...form}
                {...errors}
              />
            </section>
          );
        }
        
        if (form.type === 'multi') {
          // This needs to return something.
          // Looks like you may have been treating this as a JSX child
          // RETURN
          return form.multiTypes.map(multi => {
            if (multi.type === 'text') {
              return (
                <section key={form.prop}>
                  <TextInput
                    {...form}
                  />
                </section>
              );
            }
          })
        }
      })}
      <input type="submit" />
    </form>