I'm trying to iterate through all the keys in a hash, but no output is returned from the loop. console.log()
outputs as expected. Any idea why the JSX isn't returned and outputted correct?
var DynamicForm = React.createClass({
getInitialState: function() {
var items = {};
items[1] = { name: '', populate_at: '', same_as: '',
autocomplete_from: '', title: '' };
items[2] = { name: '', populate_at: '', same_as: '',
autocomplete_from: '', title: '' };
return { items };
},
render: function() {
return (
<div>
// {this.state.items.map(function(object, i){
// ^ This worked previously when items was an array.
{ Object.keys(this.state.items).forEach(function (key) {
console.log('key: ', key); // Returns key: 1 and key: 2
return (
<div>
<FieldName/>
<PopulateAtCheckboxes populate_at={data.populate_at} />
</div>
);
}, this)}
<button onClick={this.newFieldEntry}>Create a new field</button>
<button onClick={this.saveAndContinue}>Save and Continue</button>
</div>
);
}
You can nest JSX elements inside of other JSX elements, just like in HTML.
Using the Array map function is a very common way to loop through an Array of elements and create components according to them in React. This is a great way to do a loop which is a pretty efficient and is a tidy way to do your loops in JSX. It's not the only way to do it, but the preferred way.
forEach method can be used when you need to call a function for every element in an array. However, forEach() can't be used to iterate over an array directly in your JSX code.
Use the Object. keys() method to get an array of the object's keys. Use the map() method to iterate over the array of keys.
Object.keys(this.state.items).forEach(function (key) {
Array.prototype.forEach()
doesn't return anything - use .map()
instead:
Object.keys(this.state.items).map(function (key) {
var item = this.state.items[key]
// ...
a shortcut would be:
Object.values(this.state.items).map({
name,
populate_at,
same_as,
autocomplete_from,
title
} => <div key={name}>
<FieldName/>
<PopulateAtCheckboxes populate_at={data.populate_at} />
</div>);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With