Using array and array.map() to render data in React

For instance, we need to display 4 input elements, for “First Name”, “Last Name”, “Address” and “Age”.

HTML

With just pure HTML/CSS. We code it one by one and change whatever parameters that need to be changed.

<label>First Name</label>  <input type="text" />
<label>Last Name</label>  <input type="text" />
<label>Address</label>  <input type="text" />
<label>Age</label>  <input type="number" />

REACT

What if we need to display 50 input elements, this will be a lot of work and a lot of lines. But we will stick rendering just 4 elements. In react we can use array.map() to shorten and simplify rendering of these elements.

First of course, you need to make a component.

Then in your component, store the parameters we need in an object and store it in an array.

 const infos = [
        {name: "firstName", labelText: "First Name", type: "text"},
        {name: "lastName", labelText: "First Name", type: "text",},
        {name: "address", labelText: "Address", type: "text"},
        {name: "age", labelText: "Age", type: "number"},
    ]

Iterate and assign the values from the array and render the element like the code below.

Get Noel Pulido’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

note: Always assign a value to a key when using map and should be unique.

return (
        <form>
          {infos.map((info) =>(
              <div key={info.name}>
                  <label>{info.labelText} </label>
                  <input name = {info.name} type={info.type} />
                  <hr />
              </div>
          ))}
        </form>
      )

Result:

We can also add more parameters, and use it on CSS properties such as color, left etc. I added more properties on our original array, such as labelDisplay, labelTextAlign, and labelColor.

const infos = [
        {
            name: "firstName", 
            labelText: "First Name", 
            type: "text"},
        {
            name: "lastName", 
            labelText: "Last Name", 
            type: "text", 
            labelDisplay: "block", 
            labelTextAlign: "right"},
        {
            name: "address", 
            labelText: "Address", 
            type: "text", 
            labelColor: "red"},
        {
            name: "age", 
            labelText: "Age", 
            type: "number",
            labelDisplay: "block", 
            labelTextAlign: "left"},
    ]

And iterate the values of array, this time I used the additional properties.

return (
      <form style={{textAlign: "left"}}>
        {infos.map((info) =>(
            <div key={info.name}>
                <label style = {{
                    display: info.labelDisplay, 
                    textAlign: info.labelTextAlign,
                    color: info.labelColor
                    }}>{info.labelText} </label>
                <input name = {info.name} type={info.type} />
                <hr />
            </div>
        ))}
      </form>

Notice the changes? The label “Last Name” is now aligned right, and the display is “block”. The label “Address” is now color red. And the label “Age” is now aligned left, and the display is “block”.

Full Code

See full code (codepen.io)

or

cut and paste the code below.

import React from 'react';


class Form extends React.Component {
  render() {
    const infos = [
        {
            name: "firstName", 
            labelText: "First Name", 
            type: "text"},
        {
            name: "lastName", 
            labelText: "Last Name", 
            type: "text", 
            labelDisplay: "block", 
            labelTextAlign: "right"},
        {
            name: "address", 
            labelText: "Address", 
            type: "text", 
            labelColor: "red"},
        {
            name: "age", 
            labelText: "Age", 
            type: "number",
            labelDisplay: "block", 
            labelTextAlign: "left"},
    ]
    
    return (
      <form style={{textAlign: "left"}}>
        {infos.map((info) =>(
            <div key={info.name}>
                <label style = {{
                    display: info.labelDisplay, 
                    textAlign: info.labelTextAlign,
                    color: info.labelColor
                    }}>{info.labelText} </label>
                <input name = {info.name} type={info.type} />
                <hr />
            </div>
        ))}
      </form>
    )
  }
}

export default Form;

If you see some repetitive codes of rendering elements, in React you can use array.map not only to shorten it, but it also simplifies the code for better understanding, especially for other coders if you are working with a group.