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


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

For example,

const employeeList = [
    {
      firstName: "John",
      lastName: "Erwin",
      email: "john@gmail.com"

    },
{
     firstName: "Ram",
      lastName: "Kumar",
      email: "john@gmail.com"
      }
  ];

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

Convert Array into String in React component

We can use Array map function to iterate each object of an array and convert each properties into string

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

Array map function in class component

  • let’s create a react component app.jsx
  • we have array of objects stored in react state object which we are going to convert array into string
  • In render method, Iterated array of objects using map method and construct the result object
  • In render method add this result using 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: "john@gmail.com"

    },
{
     firstName: "Ram",
      lastName: "Kumar",
      email: "john@gmail.com"
      }
  ]
    }
    }
  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 an stateless functional component.

  • In Return functional component, We have used 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: "john@gmail.com"

    },
{
     firstName: "Ram",
      lastName: "Kumar",
      email: "john@gmail.com"
      }
  ];
  return (
    <ul>
      {this.employeeList.map((emp, index) => (
        <li key={index}>{emp.firstName}-{emp.lastName}</li>
      ))};
    </ul>
  );
}

using reduce function in react

Array has reduce function to reduce using accumulator. This takes an array of objects and convert reduced array of string.

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: "john@gmail.com"

    },
{
     firstName: "Ram",
      lastName: "Kumar",
      email: "john@gmail.com"
      }
  ]
    }
    }
  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 array of objects in stateful and stateless components

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.