How To Render Pretty Json Data Inside Text Area React Js?

I am new to react js.I have a problem in rendering the pretty json data inside textarea.I don't know Which part is wrong I want my prettyjson to render inside textarea Like this 'e

Solution 1:

No need to use difficult regex, we can use functionality from JSON.stringify(object, undefined, 2) to get beautifully rendered strings from JSON.

var obj={"glossary":{"title":"example glossary","GlossDiv":{"title":"S","GlossList":{"GlossEntry":{"ID":"SGML","SortAs":"SGML","GlossTerm":"Standard Generalized Markup Language","Acronym":"SGML","Abbrev":"ISO 8879:1986","GlossDef":{"para":"A meta-markup language, used to create markup languages such as DocBook.","GlossSeeAlso":["GML","XML"]},"GlossSee":"markup"}}}}}


var pretty = JSON.stringify(obj, undefined, 2);

var ugly = document.getElementById('myTextArea').value; document.getElementById('myTextArea').value = pretty;

Solution 2:

 <textarea value={this.state.data.map(e=>JSON.stringify(e))}  defaultValue="val" />

result{"email":"some@mail"},{"email":"some@mail"},{"email":"some@mail"}

---

let value = this.state.data.map(e=>JSON.stringify(e).replace(/{|}/g,''));

<textareavalue={value}defaultValue="val" />

result"email" : "xx@yy.y", "email" : "some@mail", "email" : "some@mail"

---

let value = this.state.data.map(e=>JSON.stringify(e).replace(/{|}/g,'')).join(',\n');

 <textareavalue={value}defaultValue="val" />

result"email" : "xx@yy.y", "email" : "some@mail", "email" : "some@mail"

In HTML, the value of is set via children. In React, you should use value instead.

Solution 3:

/**
 * Created by arfo on 6/26/2016.
 */varReact =require('react');
var api = require('../utils');


varBulkmail = React.createClass({
    getInitialState:function () {
      return{
          default:10,
          data:[],
          color:'#58FA58'

      }
    },
    componentDidMount:function () {
        api.getemail(this.state.default).then(function (response) {
           this.setState({
               data:response

           })
        }.bind(this))
    },
    onSubmit:function (e) {
      e.preventDefault();
      console.log(this.refs.text.value.trim());


    },

    onChange:function (e) {
     e.preventDefault();
        //console.log(this.refs.text.value.trim())var data = this.refs.text.value.trim();
        if(isNaN(data)){
            this.setState({
                color:'#FE2E2E'
            })
        }else{
            this.setState({
                color:'#58FA58'
            })
        }
    },

    getEmailValue:function(){
    returnthis.state.data.map(function(data) {
                           returnJSON.stringify(data.email)
                       }).join('\n');
},
    render:function () {
        console.log(this.state.data);
        var results = this.state.data;
        return(
           <divclassName="bodybox"><divclassName="box"><divclassName="upc"><p>Generate Bulk Email</p><formonSubmit={this.onSubmit}><inputonChange={this.onChange}type="text"style={{border:'1pxsolid '+this.state.color}}  ref="text"defaultValue={this.state.default}placeholder="Enter Number"/><button>Get Data</button></form><divclassName="result"><ul>
                              {this.state.data.map(function (data) {
                                  return  <likey={data.id}>{data.email}</li>
                              })}

                          </ul></div></div><divclassName="tdown"><p>Json Format</p><textareavalue={getEmailValue()}

                       </textarea></div></div></div>
        )
    }
});