So I have a React.js component, and I want to loop through an object I import to add HTML options to it. Here is what I tried, which is both ugly and does not work:
import React from 'react';
import AccountTypes from '../data/AccountType';
const AccountTypeSelect = (props) => {
return (
<select id={props.id} className = {props.classString} style={props.styleObject}>
<option value="nothingSelected" defaultValue>--Select--</option>
{
$.each(AccountTypes, function(index) {
<option val={this.id}>this.name</option>
})
}
</select>
);
};
export default AccountTypeSelect;
I received this error in the console from the above code:
invariant.js?4599:38 - Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {id, name, enabled, additionalInfo}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of AccountTypeSelect
.
Do I really need to convert each object into an array or wrap it with createFragment to use it? What is the best practice for this case?
See how the function tbody is being passed a for loop as an argument – leading to a syntax error. But you can make an array, and then pass that in as an argument: const rows = []; for (let i = 0; i < numrows; i++) { rows. push(ObjectRow()); } return tbody(rows);
To loop through an array of objects in React:Use the map() method to iterate over the array. The function you pass to map() gets called for each element in the array. The method returns a new array with the results of the passed in function.
Object.Before ES6, the only way to loop through an object was through using the for...in loop. The Object. keys() method was introduced in ES6 to make it easier to loop over objects. It takes the object that you want to loop over as an argument and returns an array containing all properties names (or keys).
Points to note :
Your data is in an Object , not in an array : therefore to loop through it , you will have to use Object.keys(yourObject).map() instead of yourObject.map()
With this in mind ; here is the solution
var user = {
fname:'John',
lname : 'Doe',
email:'[email protected]'
}
class App extends Component {
render() {
return (
<p>
<ul>
{
Object.keys(user).map((oneKey,i)=>{
return (
<li key={i}>{user[oneKey]}</li>
)
})
}
</ul>
</p>
);
}
}
Instead of $.each
use map
:
{AccountTypes.map(function(a) {
return (
<option key={a.id} val={a.id}>{a.name}</option>
);
})}
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