Solution

To convert array to string in react js, use join() method for array of string, number and use JSON.stringify() for array of object.

join() Method

The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string.

JSON.stringify() method

The JSON.stringify() static method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

Snippet

In this snippet, we will see short example to convert array to string in react js.

const arr1 = ["aGuideHub", "Infinitbility", "ReactJsSnippet"];
console.log(arr1.join()); // "aGuideHub,Infinitbility,ReactJsSnippet"

const arr2 = [
  {
    id: 1,
    name: "infinitbility"
  },
  {
    id: 2,
    name: "aGuideHub"
  }
];
console.log(JSON.stringify(arr2)); // '[{"id":1,"name":"infinitbility"},{"id":2,"name":"aGuideHub"}]'

Example

In this example section, we will see both option convert array to string using join() method and JSON.stringify() method.

Convert array to string using join() method

Here, we will use join() method to convert array to string and below example will convert array of number, string into string.

Let’s start coding…

App.js

import React, { useState } from "react";
export default function App() {
  const [strArray, setStrArray] = useState([
    "aGuideHub",
    "Infinitbility",
    "ReactJsSnippet"
  ]);
  const [numArray, setNumArray] = useState([1, 2, 3, 4, 5]);

  return (
    <div className="App">
      <h1>{`Convert array of string to string`}</h1>
      <p>{strArray.join()}</p>
      <h1>{`Convert array of number to string`}</h1>
      <p>{numArray.join()}</p>
    </div>
  );
}

Output

convert array of string to string

Convert array to string using JSON.stringify() method

Here, we will use JSON.stringify() method to convert array to string and below example will convert array of number, string, object into string.

Let’s start coding…

App.js

import React, { useState } from "react";
export default function App() {
  const [strArray, setStrArray] = useState([
    "aGuideHub",
    "Infinitbility",
    "ReactJsSnippet"
  ]);
  const [numArray, setNumArray] = useState([1, 2, 3, 4, 5]);
  const [objArray, setObjArray] = useState([
    {
      id: 1,
      name: "infinitbility"
    },
    {
      id: 2,
      name: "aGuideHub"
    }
  ]);

  return (
    <div className="App">
      <h1>{`Convert array of string to string`}</h1>
      <p>{JSON.stringify(strArray)}</p>
      <h1>{`Convert array of number to string`}</h1>
      <p>{JSON.stringify(numArray)}</p>
      <h1>{`Convert array of object to string`}</h1>
      <p>{JSON.stringify(objArray)}</p>
    </div>
  );
}

Output

convert array of object to string

Here, we are provided code sandbox links for the above program import font in styled components. then you can use whenever you went and do the changes as per your requirements.

codesandbox