i'm reactjs newbie , i'm practising creating simple example expected result is, each input value (separated whitespace) inserted in html element (<h1>). executed instead each output value disappears when it's being separated space. it's better copy-paste code below on own project understand mean.
import react 'react'; class items extends react.component { constructor() { super(); this.state = { result: '' } this.showitems = this.showitems.bind(this); } render() { let results = this.state.result, resultitem = []; for(var i=0; i<results.length; i++) { resultitem = results[i]; } return( <div> /* example, user typed "item1 item2 item3" */ <input type='text' placeholder='enter items' onchange={this.showitems} /> <div classname='result'> <h1>{resultitem}</h1> /* here, displayed result should be: <h1>item1</h1> <h1>item2</h1> <h1>item3</h1> */ </div> </div> ); } itemsresult(result) { this.setstate({result}); } showitems(e) { const items = e.target.value.split(' '); this.itemsresult(items); } } export default items; how can fix this?
you need map on array create after splitting space
class items extends react.component { constructor() { super(); this.state = { result: [] } this.showitems = this.showitems.bind(this); } render() { return( <div> <input type='text' placeholder='enter items' onchange={this.showitems} /> <div classname='result'> {this.state.result.length > 0 && this.state.result.map(function(item , index){ return <h1 key={index}>{item}</h1> })} </div> </div> ); } itemsresult (result) { console.log(result) this.setstate({result}); } showitems(e) { const items = e.target.value.split(' '); this.itemsresult(items); } } reactdom.render(<items/>, document.getelementbyid('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>
Comments
Post a Comment