Вы должны получить результат, который вы ищете

я есть компонент со следующим рендером:

  render() {
    const { policy } = this.props;
    let deployment = policy.Deployment;
    let value = policy.value;
    let policyLegend = deployment.policyLegend;
    let policyObj = this.valueToPolicy(policyLegend, value);
    console.log(policy);
    console.log(deployment);
    console.log(value);
    console.log(policyLegend);
    console.log(policyObj);
    return(
      <div>
        <Form onSubmit={ (event) => this.handleSubmit(event, this.props) }>
          {
            policyLegend.map(function(policy) {
              <div>
                <h3 key={ policy.id }>{ policy.displayName }</h3>
                {
                  policy.values.map(value => {
                    return(
                      <Form.Field key={ value.name }>
                        <label>{ value.displayName }</label>
                        <Checkbox toggle />
                      </Form.Field>
                    );
                  })
                }
              </div>
            })
          }
          <Button name={ 'Submit' } type='submit'>Submit</Button>
          <Button onClick={ this.props.onCancel }>Cancel</Button>
        </Form>
      </div>
    )
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

policyLegend - это массив объектов с массивом «values» внутри каждого объекта.

При сборке приложения я не получаю ошибок, но на странице компонента ничего не появляется. Я не уверен, где я иду не так, и буду признателен за любые советы, спасибо.

Ответы на вопрос(2)

Решение Вопроса

что вы ничего не возвращаете внутри карты policyLegend. Попробуй это:

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

вы создали:

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

Вы должны получить результат, который вы ищете

Ваш ответ на вопрос