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 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
Links
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.