React not rendering mutiple 'input' DOM elements

Question

import React, { Component } from "react";
import {
  Button,
} from "reactstrap";

import {
  Formik,
  Form,
  Field,
} from "formik";

export class UniversalInputForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showCategories: false,
      categoryChosen: "Please choose",
      initialValues: {
        social: {
          facebook: "this is the facebook string",
          twitter: "this is the twitter string",
        },
        textValue: "Just a string value",
      },
    };
  }
  render() {
    const {
      socketMethod,
      emitSocketEvent,
    } = this.props;

let inputFields = Object.entries(this.state.initialValues).map(
  (item, index1) => {
    if (typeof item[1] === "object") {
      // console.log(item[1]);
      Object.keys(item[1]).map((itemChild, index2) => {
        if (typeof item[1][itemChild] === "string") {
          return (
          <Field name="test" placeholder="test" className="w-100" />
          );
        }
      });
    }
    if (typeof item[1] === "string") {
      return (
        <Field name={item[1]} placeholder={item[1]} className="w-100" />
      );
    }
  }
);

return (
  <div>
    <Formik
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      <Form>
     <React.Fragment>   {inputFields} </React.Fragment>
        <Button
          color="success"
          type="submit"
          onClick={() => emitSocketEvent(socketMethod)}
          className="mt-3 w-100"
        > 
          Submit
        </Button>
      </Form>
    </Formik>
  </div>
);
}

Console.log method works after both typeof item[1] === "string" and typeof item[1] === "object"
Tried wrapping inputFields in <React.Fragment>, as well as displaying straight after
The input field appears only for typeof item[1] === "string" line.

What is the reason for this? Could it be, that React nests the inputs and nothing gets displayed as a result?

arslan2012 · Accepted Answer · 2020-08-20 08:16:42Z

1

object.map returns array, which is ReactNode[], this is fine.

but you have a map inside another map, which will make the return type ReactNode[][].

React can't parse multidimensional array so it won't render.

try this

let inputFields = [];
Object.values(this.state.initialValues).map(
  (item, index1) => {
    if (typeof item === "object") {
      Object.values(item).map((itemChild, index2) => {
        if (typeof itemChild === "string") {
          inputFields.push(
          <Field name="test" placeholder="test" className="w-100" />
          );
        }
      });
    }
    if (typeof item === "string") {
      inputFields.push(
        <Field name={item} placeholder={item} className="w-100" />
      );
    }
  }
);

answered Aug 20, 2020 at 8:16

arslan2012

1,0287 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adriano Repetti Over a year ago

return Object.keys(... would also fix it but yeah. I'd also add key when creating those arrays.

Collectives™ on Stack Overflow

React not rendering mutiple 'input' DOM elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related