NextJS: Retrieve the information in its initial state

Is there a way to retrieve the original format of a value?

For example:

The values in my textarea are:

Name: Your Name
Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f980968c8b9c94989095b994989095d79a9694">[email protected]</a>
Contact No: 123456789

Content: 
Whatever it is

When I save these words in my database, I would like to be able to retrieve them in the same format. Currently, when I fetch data from my database, they appear as one continuous string like this:

Name: Your Name Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="770e180205121a161e1b371a161e1b5914181a">[email protected]</a> Contact No: 123456789 Content: Whatever it is

Here's part of my code:

const [info, setInfo] = useState(null);

useEffect(() => {
        async function fetchData() {

            const res = await fetch(`http://localhost:4000/api/rfc/get-all-rfc-by-id/${localStorage.getItem("1003")}`)
            const infos = await res.json()
            setInfo(infos)
        }
        fetchData()
    }, [rfcName])

This is a snippet of my HTML Code:

<tbody>
    {
    info ? info.map(infos => (<DisplayRFDDataInfo key={info._id} info={infos}/>))
     : <> </>
    }
</tbody>
const DisplayRFDDataInfo = ({info}) => {

    function createNewDocumentPage(e) {
    }

    return (
        <>
            <tr>
            <td key={info.subject}>{info.subject}</td>
            <td key={info.content}>{info.content}</td>
            <td className="text-center" key={info._id}><Button type="submit" onClick={createNewDocumentPage} className="btn btn-warning">Manage</Button></td>
            </tr>
        </>
    )
}

https://i.stack.imgur.com/N0KEM.png

Answer №1

Based on my assumption, the returned data is likely in JSON format. It seems that parsing the response data will give you the same format (object).

JSON.parse(resposneData)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the issue of CSS animation not functioning properly when used in conjunction with a

I am working on creating a switch button with CSS and JavaScript that needs an animation when toggling or clicked. The only issue I am facing is related to the animation. I am wondering if there might be any problem with the positioning (relative, absol ...

Error encountered: TypeError: __webpack_require__.t is not a function - Issue appears only on live server, while localhost runs without any problem

I set up an e-commerce site that runs smoothly on localhost. However, when I deploy it to a live server, an error appears. Interestingly, the error disappears after reloading the page. Here is the code snippet: import React, { useEffect, useState } from & ...

Tips for aligning pagination in the MUI v5 table component and creating a fixed column

I am currently experimenting with MUI table components and have created an example below with pagination. const MuiTable = () => { const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(5); const [data, setData] ...

Discover the ins and outs of the "DOM" within a string, treating it as HTML in AngularJS

Looking to extract data from a legal HTML string based on tags and attributes, but want to avoid using jQuery in favor of Angular. Are there built-in functions in Angular for this task? ...

What could be causing my click event to fail to register after sorting a WebGrid with a click?

Running into an issue with my webgrid and search button. It works perfectly if I search first, updating the grid with results. But when I click on a header to sort the grid, the search button stops working. Can't seem to figure out how to solve this d ...

Refreshing dynamically added rows through ajax updates

I'm struggling to clearly articulate my problem. Currently, I have a function that retrieves values from a database using ajax and then dynamically adds each result as a row in a table. This allows users to edit or delete any row as needed. I'm ...

Error: An unexpected character was found in the Gulpfile.js

Having an issue in my Gulpfile.js: gulp.task('webpack', gulp.series(async () => { const option = yargs.argv.release ? "-p" : "-d"; execSync(`node_modules/webpack-cli/bin/cli.js ${option}`, { stdio: [null, process.stdout, proce ...

Support for h264 in Windows Media Player across various versions of Windows operating system

Are there specific versions of Windows that are capable of playing h264 videos with Windows Media Player installed by default? Is it feasible to determine this support using Javascript? We currently deliver MPEG-4 video files through Flash, but some users ...

Tips for creating a simulated asynchronous queue with blocking functionality in JavaScript or TypeScript

How about this for a paradox: I'm looking to develop an asynchronous blocking queue in JavaScript/TypeScript (or any other language if Typescript is not feasible). Essentially, I want to create something similar to Java's BlockingQueue, but inste ...

What is the best way to set multiple headers and change the content type when needed?

I am struggling with a function that cannot be overridden: getHtml:function(aURL,aPostData,aHeaders,aMethod){ this.xhr = new XMLHttpRequest(); var tmp=this; this.xhr.onreadystatechange=function(){ tmp.onStateChange(); }; if(aPo ...

Having trouble decoding invalid JSON received from the Twilio API

For the past 4 hours, I've been struggling to parse a basic JSON from Twilio. The process is as follows: A text message containing a magnet link is sent Twilio forwards the request to my serverless function in the cloud I attempt to parse the reques ...

Developing a JSONP functionality

I am currently trying to use JSONP in order to display data within my div. However, the code is not showing anything. I have also included jquery.jsonp.js in my project with the following path: PRJFOLDER->WEBPages->JavaScript->qu ...

Exploring Node's Configuration File Reading Process

Trying my best to provide all the details for my question. Being a newbie to NodeJS, I appreciate your kind guidance :D In the process of developing an application in Node, focusing on enabling users to view stats regarding their Plex Media Libraries. The ...

Smart method for organizing browsing history

I'm currently working on enhancing the navigation in an AJAX application. Here is my current approach: Whenever a user clicks on an AJAX link, the corresponding call is made and the hash is updated. Upon loading a new page, I verify if the hash exis ...

Issue encountered in Next.js: "The specified file is not a valid image for rendering."

Currently, I am working through the Next.js tutorial (specifically this one). Below is a simplified version of the code from the tutorial for better understanding: /pages/posts/first-post.js import Link from 'next/link'; import Head from 'n ...

Changing the Style of a CSS Module Using JavaScript

Embarking on a journey into Javascript and React, I am currently working on my first React app. My aim is to adjust the number of "gridTemplateRows" displayed on the screen using a variable that will be updated based on data. Right now, it's hardcode ...

What is the best method for deleting the div with id "__next" in Next.js?

I'm currently working on a website using Next.js and I'm aiming to create a header with a position: sticky; effect. Nevertheless, Next.js automatically inserts a div with the attribute id="__next" at the top of my website without my co ...

Loading identical items using jQuery Ajax

I have a situation where an ajax request is returning multiple URLs which I am using to create images like: <img URL="1" /> <img URL="1" /> <img URL="2" /> <img URL="1" /> <img URL="3" /> <img URL="2" /> and so on... ...

Styling a dynamically-injected div using an AJAX request (xhrGet)

Hello everyone, currently I am using the code below to fetch updated content after receiving a "push" event from a server. The new content is then used to replace the existing div/content. However, I'm facing an issue where none of my styles from the ...

When a model.find is passed as an argument to be invoked, it results in an error

After working with ExpressJS for a while, I decided to explore using Mongoose alongside it. In the callback of my queries where I handle errors like this: function( error, data ) {...} , I found myself repeating code. To streamline this process, I created ...