How to Convert an array into String react?| Array map and reduce example in react

How to Convert an array into String react?| Array map and reduce example in react

This is a short tutorial on how to convert an array of object properties into a String in React component render component. We have an array of object data either coming from API or fixed.

For example,

const employeeList = [
  {
    firstName: "John",
    lastName: "Erwin",
    email: "[email protected]",
  },
  {
    firstName: "Ram",
    lastName: "Kumar",
    email: "[email protected]",
  },
];

We can do it in multiple ways to convert Array to string in react.

Convert Array into String in React component

We can use the Array map function to iterate each object of an array and convert each property into a string.

Let’s see how to iterate using the Array.map method to in react component.

Array map function in class component

  • let’s create a react component app.jsx
  • we have an array of objects stored in react state object which we are going to convert the array into a string
  • In the render method, Iterated array of objects using the map method and construct the result object
  • In the render method add this result using the javascript expression syntax
import React, { Component } from "react";
import { render } from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          firstName: "John",
          lastName: "Erwin",
          email: "[email protected]",
        },
        {
          firstName: "Ram",
          lastName: "Kumar",
          email: "[email protected]",
        },
      ],
    };
  }
  render() {
    const emps = this.employeeList.map((emp, index) => (
      <li key={index}>
        {emp.firstName} - {emp.lastName}
      </li>
    ));

    return <ul>{{ emps }}</ul>;
  }
}

render(<App />, document.querySelector("#app"));

This prints the ordered list of objects values

Array map function in functional component

This is a stateless functional component.

  • In the Return functional component, We have used the map to iterate and construct li object, print using javascript expression
import "./styles.css"; export default function App() { const employeeList = [ {
firstName: "John", lastName: "Erwin", email: "[email protected]", }, { firstName:
"Ram", lastName: "Kumar", email: "[email protected]" }, ]; return (
<ul>
  {this.employeeList.map((emp, index) => (
  <li key="{index}">{emp.firstName}-{emp.lastName}</li>
  ))} ;
</ul>
); }

using reduce function in react

The array has reduce function to reduce using the accumulator. This takes an array of objects and converts a reduced array of strings.

Here is an syntax

reduce((accumulator, currentValue) => { ... } )

You can check more about here🔗

Here is an Array reduce example

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
    constructor(props) {
    super(props);
    this.state = {
      data:  [
    {
      firstName: "John",
      lastName: "Erwin",
      email: "[email protected]"

    },
{
     firstName: "Ram",
      lastName: "Kumar",
      email: "[email protected]"
      }
  ]
    }
    }
  render() {

const resultEmps = this.employeeList.reduce(((acc,curr) =>
    <li key={curr.email}>{curr.firstName} - {curr.lastName}</li>);

    return <ul>{{resultEmps}}</ul>;
  }
}

render(<App />, document.querySelector('#app'));

Conclusion

In this tutorial, You learned how to render an array of objects in stateful and stateless components.