Reactjs - 从数据集构建表单，FormElement 不返回渲染函数

Question

I am dynamically building a form based on the state build in the constructor. I am having success building the outer html but the inner form html is not rendering. cAN SOMEONE POINT OUT WHAT i AM DOING WRONG HERE?

class Forms extends Component {
    constructor(props) {
        super(props);
        this.state = {
            enrollment: {
                class: "form-style",
                fieldsets: [{
                    id: "1",
                    title: "Company Enrollment Form",
                    formElements: [{
                        label: "Company Name:",
                        element: "input",
                        type: "text",
                        class: "",
                        name: "cName",
                        placeholder: "Your Company's Name *",
                        required: true,
                        disabled: false
                    }, {
                        label: "Company Type:",
                        element: "select",
                        type: "populateDDL",
                        class: "",
                        name: "sltCompanyType",
                        placeholder: "",
                        required: true,
                        disabled: false
                    }]
                }]
            }
        }
    }

    render() {
        let Content = null;
        if (this.props.type === "enrollment") {
            Content = <EnrollmentForm state={this.state.enrollment} />
        } else if (this.props.type === "contact") {
            Content = <ContactUsForm />
        } else {
            Content = <fourOhFour />
        }
        return (
            <div className="container formContent">
                {Content}
            </div>
        );
    }
};

function EnrollmentForm(form) {
    function renderFieldsets(fieldsets) {
        if (fieldsets.length > 0) {
            return fieldsets.map((fieldset, index) => (
                <Fieldset key={index} set={fieldset} />
            ));
        }
        else return [];
    }
    function renderFormElements(formElements) {
        if (formElements.length > 0) {
            return formElements.map((formElement, i) => (
                <FormElement key={i} set={formElement} />
            ));
        }
        else return [];
    }
    const FormElement = (props, index) => {
        console.log(props);
        /* ^^^ NOT APPEARING/LOGGING IN THE CONSOLE ^^^ */
        if (props.tag === "input") {
            return (
                <input key={index} name={props.name} />
            );
        }else if (props.tag === "select") {
            return (
                <select key={index} />
            );
        }
    };
    const Fieldset = (props, index) => {
        const elements = renderFormElements(props.set.formElements);
        return (
            <fieldset key={index}>
                <legend>
                    <span className="number fa fa-address-card"></span>
                    {props.set.title}
                </legend>
            </fieldset>
        );
    };
    const fieldsets = renderFieldsets(form.state.fieldsets);
    return (
        <form className={form.state.class}>
            {fieldsets}
        </form>
    );
}

The FormElement variable is not returning the html... I need to return a different type of html element based on what the tag is in the data model. In the code I have successfully created the outer fieldset but when I go to insert the html elements inside the fieldset, it doesn't do anything. I put a console.log in the code block but apparently even when I try to use the "FormElement" the code isn't firing ...

Answer 1

You have bugs in your code.

Your FormElement should look like

const FormElement = (props, index) => {
      console.log(props);
      /* ^^^ NOT APPEARING/LOGGING IN THE CONSOLE ^^^ */
      if (props.set.element === "input") {//changed from props.tags--  1
          return (
              <input key={index} name={props.name} />
          );
      }else if (props.set.element === "select") {//changed from props.tags --1
          return (
              <select key={index} />
          );
      }
      return <div>Something which is not select or input</div>; //added a fallback return. --1
  };

The bugs that were fixed above are:

(1) props.tags changed to props.set.element . There was no tags component in the props. So none of the if blocks were being rendered and this led to the component not returning anything. This led to an error that said

FormElement(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

This was resolved by adding the fallback return statement (2).

Your FieldSets should look like

const Fieldset = (props, index) => {
      const elements = renderFormElements(props.set.formElements);
      return (
          <fieldset key={index}>
              <legend>
                  <span className="number fa fa-address-card"></span>
                  {props.set.title}
              </legend>
              <div>{elements}</div> // consumed the elements that was created in renderFormElements.
          </fieldset>
      );
  };

The elements variable was never used in render, which led to no FormElements showing up. That was the only error fixed in the above code.

I would suggest cleaning up your code by

1. Converting EnrollmentForm to a class.
2. Moving FieldSet and FormElement to seperate classes or at least funtional components

That would make the logic a lot easier to debug in future.