Jason Chen Jason Chen - 4 months ago 8
React JSX Question

Loop with React?

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

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>
    );
}