How to have an array with objects where the objects can increment and state should be set for certain properties in React


First of all, apologies for the long and ugly question title…

I have an array with objects in it. Each object in this array holds data for a form. I loop over this array using .map(), which allows me to create multiple forms which are identical in build up, but have different data. The form elements are in a different array with objects, where each object represents an input field.

Now where I’m stuck is that I don’t know how to handle the data, or setting of the state. When a user selects something in a form, it should populate the object in the array with data which is specific to that form. But I don’t really know how to do that.

Below is my code.

This component is the parent component of the forms. I’m looping over the data to create a form, which I give the formElements array.

import { useState } from "react";
import SectiontWrapper from "../../primitives/section-wrapper";
import SectionHeader from "../../primitives/section-header";
import ExpandableForm from "../../constructs/expandable-form";

const AddStocksSection = () => {
  const [stocks, setStocks] = useState([
    {
      market: "",
      stock: "",
      amount: "",
    },
  ]);
  const formElements = [
    {
      label: "Select a market",
      placeholder: "Select",
      required: true,
      value: "",
      onChange: "",
      disabled: "",
      type: "select",
      options: [
        {
          name: "Select",
          value: "select",
        },
        {
          name: "AEX",
          value: "aex",
        },
      ],
    },
    {
      label: "Select a stock",
      placeholder: "Select",
      required: true,
      value: "",
      onChange: "",
      disabled: "",
      type: "select",
      options: [
        {
          name: "Select",
          value: "select",
        },
        {
          name: "Googl",
          value: "googl",
        },
      ],
    },
    {
      label: "How many do you have",
      placeholder: "100",
      required: true,
      value: "",
      onChange: "",
      disabled: "",
      type: "number",
    },
  ];
  return (
    <SectiontWrapper>
      <SectionHeader>Add some stocks</SectionHeader>
      {stocks.map((stock, i) => (
        <ExpandableForm
          key={i}
          expanded={false}
          formElements={formElements}
          data={stock}
        />
      ))}
    </SectiontWrapper>
  );
};

export default AddStocksSection;

Below is my expandable form component. It is a form, which should expand, downsize, depending on the prop it receives.

import {
  FormWrapper,
  ButtonGroup,
  FormContainer,
} from "./expandable-form-style";
import ButtonOutlined from "../../primitives/button-outlined";
import ButtonSolid from "../../primitives/button-solid";
import Loader from "../loader";
import getFormElement from "../../../tools/getFormElement";

const ExpandableForm = ({
  submitForm,
  isDisabled,
  formElements,
  isLoading,
  expanded,
}) => {
  return (
    <FormWrapper expanded={expanded}>
      <FormContainer>
        {formElements.map((formElement, i) => {
          const FormElement = getFormElement(formElement.type);
          return (
            <FormElement
              key={i}
              label={formElement.label}
              placeholder={formElement.placeholder}
              value={formElement.value}
              onChange={formElement.onChange}
              disabled={formElement.disabled}
              type={formElement.type}
              options={formElement.options}
            />
          );
        })}
        <ButtonGroup>
          <ButtonOutlined disabled={isLoading} color="venetianRed">
            Skip
          </ButtonOutlined>
          <ButtonSolid
            onClick={null}
            disabled={isLoading || isDisabled}
            color="yellowGreen"
          >
            Add
          </ButtonSolid>
          <ButtonSolid
            onClick={() => submitForm()}
            disabled={isLoading || isDisabled}
            color="royalVessel"
          >
            {isLoading ? <Loader /> : "Next"}
          </ButtonSolid>
        </ButtonGroup>
      </FormContainer>
    </FormWrapper>
  );
};

export default ExpandableForm;

I’m hoping my description isn’t too vague, but I’m not too sure how too ask what I’m meaning. Below is a small design of what I mean.

enter image description here

Source: JavaSript – Stack Overflow

November 28, 2021
Category : News
Tags: arrays | javascript | reactjs | styled-components

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.