Loop with React?

Question

Using React, I am implementing Dexie.js for this example. However, I don't believe this to be particularly important. I would like to know how to execute a loop of the objects in my IndexDB database using React.

As shown in my code below, dayta holds my database, and stores friends with name and age values. When my function carveit is run, it takes what users have typed in and places that value on {this.state.etv}. The code works.

However, I do not know how to have {this.state.etv} show ALL entries. As is, it only shows the most recent addition. I understand I would have to execute some kind of loop, and use the map function, but I am unsure how to go about that.

var React = require('react');

module.exports = React.createClass({
    getInitialState: function(){
        return { etv:'' }    
    },

    carveit:function(){
        var enteringtitle = document.getElementById('entertitle').value;
        var enteringmessage = document.getElementById('enterentry').value;    


        var dayta = new Dexie('testcase');
        dayta.version(1).stores({
            friends:'name, age'    
        });   


        dayta.open().catch(function(error){
        alert("Oh no son: " +error);    
        });

        dayta.friends.add({
            name: enteringtitle,
            age: enteringmessage    
        });    

        dayta.friends.each((friend)=>{
            this.setState({etv: friend.name}); 
        });    

    },    

    functionrun:function(){
        return (<div>
            <ul>
                <li>{this.state.etv}</li>   
            </ul>        
            <p>Entry Title</p>    
            <input id="entertitle" type="text" className="form-control"/>

            <p>Your Entry</p>    
            <textarea id="enterentry" className="form-control"></textarea>


            <input id="entrytitle" type="submit" value="Publish" onClick={this.carveit} />        
        </div>);
    },    

    render:function(){
        if (this.props.contentadd){
            return this.functionrun();
        }
        else {
            return null;
        }    
    }

});

Answer 1

You can perform the loop separately and have it return jsx. You can then use the return value in your template since arrays of jsx partials are supported.

render: function() {
    var itemElements = this.state.items.map(function(item, i) {
        return (
            <li>{item}</li>
        );
    });

    return (
        <ul>
            {itemElements}
        </ul>
    );
}