Map function is not generating a array of elements

Question

I have an array of object data about a form:

const formFields = [
      {
        "label": "Current Password",
        "type": "password",
        "name": "currentPassword",
        "placeholder": "Current Password",
        "required": true
      },
      {
        "label": "New Password",
        "type": "password",
        "name": "newPassword1",
        "placeholder": "New Password",
        "required": true
      },
      {
        "label": "Confirm New Password",
        "type": "password",
        "name": "newPassword2",
        "placeholder": "Confirm New Password",
        "required": true
      },
    ]

I have the component that use the array:

return (
        <Form> 
            {
                formFields.map(function(data) {
                    return 
                    <Form.Group className="mb-3">
                        <Form.Label>{ data["label"] }</Form.Label>
                        <Form.Control type={ data["type"] } name={ data["name"] } placeholder={ data["placeholder"] }  required={ data["required"] } />
                    </Form.Group>;
                }) 
            }
        
            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>
    )

All i see on the page is a button. No form label and form fields. Supposedly, the map function should create an array of element from the array of object formFields. However, it is not doing it, and the color of the return statement within in it is light, like it's never executed.

Because if return is on its own line, it will think you want to return undefined. So you never come to the Form.Group part — ShamPooSham
– ShamPooSham, Commented Oct 6, 2022 at 13:48
@Rongeegee It's JavaScript. Because "return" is a complete statement, when JavaScript sees a carriage return, it assumes that the next line begins a new statement. By putting a curly brace, or a parenthesis, you tell the parser that return ( continues on the next line. — Yanick Rochon
– Yanick Rochon, Commented Oct 6, 2022 at 14:37

Chris · Accepted Answer · 2022-10-06 13:44:45Z

2

Try wrap your return from the map function in parenthesis or put it on the same line as the <Form>, currently every iteration of your map is returning void which will cause nothing to render.

  return (
    <Form>
      {formFields.map(function (data) {
        return (
          <Form.Group className="mb-3">
            <Form.Label>{data["label"]}</Form.Label>
            <Form.Control
              type={data["type"]}
              name={data["name"]}
              placeholder={data["placeholder"]}
              required={data["required"]}
            />
          </Form.Group>
        );
      })}

      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );

answered Oct 6, 2022 at 13:44

Chris

1,3612 gold badges10 silver badges8 bronze badges

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

4 Comments

Rongeegee Over a year ago

the "return" and "(" have to be on the same line?

Chris Over a year ago

Yeah, a return by itself will always just return void without the "("

Rongeegee Over a year ago

is that a thing of JavaScript or a thing in React? @Chris

Chris Over a year ago

It's a Javascript thing, it's the same thing as straight up returning undefined. React will take an undefined or null variable without throwing any errors and render nothing which can lead to confusion.

Yanick Rochon · Accepted Answer · 2022-10-06 13:45:17Z

This is why semicolons, parentheses and curly braces are used in JavaScript, and why you see nothing; it is one of the ugly part of the language! This is what your mapping function does :

formFields.map(function(data) {
  return   // i.e. the function returns undefined here
  // code below not evaluated
  <Form.Group className="mb-3">
    <Form.Label>{ data["label"] }</Form.Label>
    <Form.Control type={ data["type"] } name={ data["name"] } placeholder={ data["placeholder"] }  required={ data["required"] } />
  </Form.Group>;
});

Change it to either :

formFields.map(function(data) {
  return (
    <Form.Group className="mb-3">
      <Form.Label>{ data["label"] }</Form.Label>
      <Form.Control type={ data["type"] } name={ data["name"] } placeholder={ data["placeholder"] }  required={ data["required"] } />
    </Form.Group>
  );
})

Or, better yet, use the arrow function syntax :

formFields.map(data => (
  <Form.Group className="mb-3">
    <Form.Label>{ data["label"] }</Form.Label>
    <Form.Control type={ data["type"] } name={ data["name"] } placeholder={ data["placeholder"] }  required={ data["required"] } />
  </Form.Group>
))

Collectives™ on Stack Overflow

Map function is not generating a array of elements

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related