React Jsx: Rendering Nested Arrays Of Objects

I have a component with the following render: policyLegend is an array of objects with a 'values' array inside each object. When my application builds, I receive no errors but n

Solution 1:

It's because you do not return anything inside the policyLegend map. Try this:

{
    policyLegend.map((policy) => {
        return (
            <div><h3key={policy.id }>{ policy.displayName }</h3>
                {
                    policy.values.map(value => {
                        return(
                            <Form.Fieldkey={value.name }><label>{ value.displayName }</label><Checkboxtoggle /></Form.Field>
                        );
                    })
                }
            </div>
        );
    })
}

Solution 2:

You are not returning the JSX from your map method. Once you return the JSX you formed :

policyLegend.map(function(policy) {
              return (<div><h3key={policy.id }>{ policy.displayName }</h3>
                {
                  policy.values.map(value => {
                    return(
                      <Form.Fieldkey={value.name }><label>{ value.displayName }</label><Checkboxtoggle /></Form.Field>
                    );
                  })
                }
              </div>)
            })

You should get the result you're looking for