Navigate back to the homepage

how to convert json object to string in react js?

Infinitbility
React
June 30th, 2022 · 1 min read
how to convert json object to string in react js?

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To convert JSON object to string in react js, use the JSON.stringify() method it will return the object as a string, and then you can do as you want like sending through API or storing in local storage.

In the following example, we will take the JSON object example and convert it into a string.

1let obj = {id: 1, name: "infinitbility"};
2
3console.log(JSON.stringify(obj)) // '{"id":1,"name":"infinitbility"}'

Today, I’m going to show you How do i convert a JSON object to a string in react js, as above mentioned here, I’m going to use the JSON.stringify() function.

Let’s start today’s tutorial how do you convert JSON object to string in react js?

In this example, we will do

  1. take an example of object state
  2. convert it into a string
  3. store in local storage
  4. print the JSON object string on the page screen
1import React, { useState, useEffect } from "react";
2import "./styles.css";
3export default function App() {
4 const [sampleObject, setSampleObject] = useState({
5 id: 1,
6 name: "infinitbility"
7 });
8
9 useEffect(() => {
10 let sampleString = JSON.stringify(sampleObject);
11 localStorage.setItem("sampleString", sampleString);
12 console.log(sampleString);
13 }, []);
14 return (
15 <div className="App">
16 <h1>{JSON.stringify(sampleObject)}</h1>
17 </div>
18 );
19}

In the above examples, we have taken the sample object state, convert it into a string, stored it in localStorage, and print it on the screen.

I hope it’s help you, All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

how to get first character of string react js?

how to get first character of string react js?

An example of get first character of string react js with step by step guide.

June 29th, 2022 · 1 min read
how to get query string value in react js?

how to get query string value in react js?

An example of get query string value in react js with step by step guide.

June 29th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]