New line '\n' not recognized inside TextField in React

Question

Context

I am using Material UI TextField and mapping an array of objects which is fetched from Database (MongoDB). Something like:

{state.map((item) => (
         <TextField
          name="description"
          multiline
          required
          type="text"
          value={item.description}
          onChange={handleChange}
        />)
      )
}

Where state is the array fetched from the database.

Problem

The item.description is displayed as it is with \n escape sequences instead of separating the line into new lines.

Examples

Additional Info

• When I try to do console.log(item.description.split('\n')) inside my React code I get the following output in the console -

As if JS is not even recognizing \n !! BUT in the same place when I run it the console I get this -

Thanks in advance!
Please let me know if anything else is needed to understand the problem better

Answer 1

Apparently I solved this by creating a helper function using replace and regex global search

const parseLines = (value) => value.replace(/(\\n)/g, "\n");

I realized I had to use \\n instead of \n to detect the string pattern of \n and replace it with newline which is simply \n.

And later in in TextField

<TextField               
 name="description"              
 multiline
 required
 type="text"
 value={parseLines(item.description)}
 onChange={handleChange}
/>