Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to loop through object in JSX using React.js

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?

like image 521
kibowki Avatar asked Aug 18 '16 16:08

kibowki


People also ask

How do you run a for loop inside JSX?

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

How do you loop through an array of objects in React?

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.

Can you loop through objects JavaScript?

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).


2 Answers

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>
    );
  }
}
like image 82
Daggie Blanqx - Douglas Mwangi Avatar answered Oct 04 '22 22:10

Daggie Blanqx - Douglas Mwangi


Instead of $.each use map:

{AccountTypes.map(function(a) {
     return (
         <option key={a.id} val={a.id}>{a.name}</option>
     );
 })}
like image 20
Kevin Avatar answered Oct 04 '22 21:10

Kevin