Material UI Textfield does not do linebreak on complex string

Question

I am trying to get some data from a MySQL query to be output nicely in a Material UI Textfield. My Textfield looks like this:

The trace variable looks like this, a complex string with a lot of escapes:

[
  "select * from person",
  "{
  \"steps\": [
    {
      \"join_preparation\": {
        \"select#\": 1,
        \"steps\": 
[
          {
            \"expanded_query\": \"/* select#1 */ select `person`.`name` AS `name` from `person`\"

          }
        ]
      }
    },
    {
      \"join_optimization\": {
        \"select#\": 
1,
        \"steps\": [
          {
            \"table_dependencies\": [
    
          {
                \"table\": \"`person`\",
                \"row_may_be_null\": false,
  
              \"map_bit\": 0,
                \"depends_on_map_bits\": [

                ]
              }
            ]
          },
          {
            \"rows_estimation\": [
              {
  
              \"table\": \"`person`\",
                \"table_scan\":
 {
                  \"rows\": 2,
                  \"cost\": 0.25
                }

              }
            ]
          },
          {
            \"considered_execution_plans\":
 [
              {
                \"plan_prefix\": [
                ],
                \"table\": \"`person`\",
                \
"best_access_path\"
: {
     
             \"considered_access_paths\": [
                    {
                      \"rows_to_scan\": 2,
                      \
"access_type\": \"scan\",
                      \"resulting_rows\": 2,
                      \"cost\": 0.45,
                      \
"chosen\": true
                    }
                  ]
                },
                \
"condition_filtering_pct\": 100,
                \"rows_for_plan\": 2,
                \"cost_for_plan\": 0.45,
                \
"chosen\": true
              }
            ]
          },
          {
            \
"attaching_conditions_to_tables\": {
              \"original_condition\": null,
              \"attached_conditions_computation\": [
              ],
              \
"attached_conditions_summary\": [
                {
                  \"table\": \"`person`\",
  
                \"attached\": null
                }
              ]
            }
          },
          {
            \
"finalizing_table_conditions\": [
            ]
          },
          {
            \"refine_plan\": [
              {
                \
"table\": \"`person`\"
              }
            ]
          }
        ]
      }
    },
    {
      \"join_execution\": {
        \"select#\": 1,
        \"steps\": [
        ]
      }
    }
  ]
}",
  0,
  0
]

And I want it to render something like this, where all newlines actually go to a newline:

But instead I get this, where the is just directly printed:

Is there anything I can do to make it output the way that I want? I have tested changing the trace variable to a simple 'hey hey' string, and that works fine, so it seems to be something about this complex string. The string is genereated by doing an Sql query using the MySql xdevapi, and converting to strings using Json.stringify(query, undefined,2).

user_11708002 · Answer

Turned out the problem was the JSON itself included the linebreak character and also some escaped string quotes. The JSON.stringify() method then actually prints these characters. I solved it by adding .replace(/\n/g, ' ').replace(/\"/g, '"'). Not the most elegant solution, but it gives me the output that I wanted.

user_10934631 · Answer

Isn't the problem that your variable is an array rather than a simple string like in your test ?

Edit: The problem seems to come from the JSON.stringify() part. If you JSON.stringify(' '), the output will be an escaped ' ' and not an actual linebreak

Material UI Textfield does not do linebreak on complex string

2 Answers