Как написать вложенные циклы в JSX, чтобы уменьшить количество повторяющегося кода?

Question

Следующий код выводит два отдельных раздела формы. Все работает нормально, но у меня есть два цикла for (), которые похожи, и две функции map (), которые также похожи. Я хочу узнать, как написать вложенный скрипт с помощью функций for () l oop и map (), чтобы я мог добавить больше свойств к моему объекту state.program, и моя форма будет обновляться автоматически, без необходимости добавления другого для () или map ().

В основном я пытаюсь провести l oop через объект, создать массивы для сопоставления с реквизитами моего компонента. Я думаю об этом неправильно?

Надеюсь, описание моей проблемы имеет смысл. Вот компоненты React ...

class CreateProgram extends Component {
  state = {
    program: {
      description: {
        title: {
          label: 'Program title',
          value: ''
        },
        category: {
          label: 'Program category',
          value: ''
        }
      },
      location: {
        location_title: {
          label: 'location title',
          value: ''
        },
        location_coor: {
          label: 'location coordinates',
          value: null
        }
      }
    }
  };
  render() {
    return <Program items={this.state.program} />;
  }
}
export default CreateProgram;

class Program extends Component {
  render() {
    const { items } = this.props;
    const descriptionArray = [];
    const locationArray = [];

    for (let key in items.description) {
      descriptionArray.push({
        id: key,
        value: items.description[key]
      });
    }
    for (let key in items.location) {
      locationArray.push({
        id: key,
        value: items.location[key]
      });
    }

    return (
      <>
        <div className="form-section">
          {descriptionArray.map(element => (
            <Input
              label={element.value.label}
              value={element.value.value}
              changed={event =>
                changed(event, element.id, 'program', 'description')
              }
            />
          ))}
        </div>

        <div className="form-section">
          {locationArray.map(element => (
            <Input
              label={element.value.label}
              value={element.value.value}
              changed={event =>
                changed(event, element.id, 'program', 'location')
              }
            />
          ))}
        </div>
      </>
    );
  }
}

export default Program;

Answer 1

Вы можете упростить родительское состояние:

state = {
    description: {
        title: {
            label: "Program title",
            value: ""
        },
        category: {
            label: "Program category",
            value: ""
        }
    },
    location: {
        location_title: {
            label: "location title",
            value: ""
        },
        location_coor: {
            label: "location coordinates",
            value: null
        }
    }
};

Затем передать их отдельно дочернему компоненту:

render() {
    return (
        <Program
            description={this.state.description}
            location={this.state.location}
        />
    );
};

А в дочернем компоненте использовать Object.entries возвращенный массив для сопоставления каждого элемента:

Object.entries(this.props.description).map(([key, value]) => (
    <Input
        key={key}
        label={value.label}
        value={value.value}
        changed={event => changed(event, key, "program", "description")}
    />
));

Object.entries(this.props.location).map(([key, value]) => (
    <Input
        key={key}
        label={value.label}
        value={value.value}
        changed={event => changed(event, key, "program", "location")}
    />
));