Как визуализировать Довольно json данные внутри текстовой области React js?

Question

Я новичок реагировать js.I есть проблемы в оказании клевые данные JSon внутри textarea.I не знаю, какая часть неправильно я хочу, чтобы мой prettyjson, чтобы сделать внутри текстового поля, как это

"email":"xxxx@x.com", 
"email":"yyyy@y.com", 
..... 

Это мой код Но я не подвожу ничего в моем

текстового поля

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


var Bulkmail = 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' 
      }) 
     } 
    }, 
    render:function() { 
     console.log(this.state.data); 
     var results = this.state.data; 
     return(
      <div className="bodybox"> 
       <div className="box"> 
        <div className="upc"> 
         <p>Generate Bulk Email</p> 
         <form onSubmit={this.onSubmit}> 
         <input onChange={this.onChange} type="text" style={{border:'1px solid '+this.state.color}} ref="text" defaultValue={this.state.default} placeholder="Enter Number"/> 
         <button>Get Data</button> 
         </form> 
         <div className="result"> 
          <ul> 
           {this.state.data.map(function (data) { 
            return <li key={data.id}>{data.email}</li> 
           })} 

          </ul> 
         </div> 

        </div> 
        <div className="tdown"> 

         <p>Json Format</p> 

         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
         <textarea defaultValue={this.state.data.map(function(data) { 
          return JSON.stringify(data.email) 
         })} > 
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
         </textarea> 
        </div> 
       </div> 
      </div> 
     ) 
    } 
}); 

module.exports = Bulkmail ; 

Answer 1

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

результату{"email":"some@mail"},{"email":"some@mail"},{"email":"some@mail"}

---

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

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

результат"email" : "xx@yy.y", "email" : "some@mail", "email" : "some@mail"

---

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

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

результат"email" : "xx@yy.y", "email" : "some@mail", "email" : "some@mail"

В HTML, значение устанавливается с помощью детей. В React вы должны использовать значение вместо этого.

Answer 2

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


var Bulkmail = 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(){ 
    return this.state.data.map(function(data) { 
          return JSON.stringify(data.email) 
         }).join('\n'); 
}, 
    render:function() { 
     console.log(this.state.data); 
     var results = this.state.data; 
     return(
      <div className="bodybox"> 
       <div className="box"> 
        <div className="upc"> 
         <p>Generate Bulk Email</p> 
         <form onSubmit={this.onSubmit}> 
         <input onChange={this.onChange} type="text" style={{border:'1px solid '+this.state.color}} ref="text" defaultValue={this.state.default} placeholder="Enter Number"/> 
         <button>Get Data</button> 
         </form> 
         <div className="result"> 
          <ul> 
           {this.state.data.map(function (data) { 
            return <li key={data.id}>{data.email}</li> 
           })} 

          </ul> 
         </div> 

        </div> 
        <div className="tdown"> 

         <p>Json Format</p> 


         <textarea value={getEmailValue()} 

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