const ProfileDetail = ({user}) => (
  <Card className="container">
    {for (let key in user) {
        if (user.hasOwnProperty(key)) {
          <li>{key}: {user[key]}</li>
        }
    }}
  </Card>
);

Can't I do loop like this in jxs? Can't do it outside of render method because this is a stateless ponent.

What's wrong with above code?

const ProfileDetail = ({user}) => (
  <Card className="container">
    {for (let key in user) {
        if (user.hasOwnProperty(key)) {
          <li>{key}: {user[key]}</li>
        }
    }}
  </Card>
);

Can't I do loop like this in jxs? Can't do it outside of render method because this is a stateless ponent.

What's wrong with above code?

• javascript
• reactjs

Share Improve this question Follow asked Apr 22, 2017 at 12:47 JayJay 16511 silver badge99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The content of a {...} must be an expression. for is a statement.

In this case, you could use Object.keys to do it all in a single outermost expression (it also does the "own" property check for you):

const ProfileDetail = ({user}) => (
  <Card className="container">
    {Object.keys(user).map(key => <li>{key}: {user[key]}</li>)}
  </Card>
);

If you prefer the for loop, though, just make the function a verbose arrow rather than a concise one, build the items up in an array, and then use them in the JSX:

const ProfileDetail = ({user}) => {
  const items = [];
  for (let key in user) {
    if (user.hasOwnProperty(key)) {
      items.push(<li>{key}: {user[key]}</li>);
    }
  }
  return <Card className="container">{items}</Card>;
};

Inside JSX we can't use if-else/switch/for, but you can call a function and inside that you can use all these. Check the DOC.

Inside Stateless Functional Component also you can write function, like this:

 const ProfileDetail = ({user}) => {
    var createList = function(){
       let a = [];
       for (let key in user) {
          if (user.hasOwnProperty(key)) {
            a.push(<li key={key}>{key}: {user[key]}</li>)
          } 
       }
       return a;
    }
    return (
       <Card className="container">
            {createList()}
      </Card>
   ) 
};

But instead of that you can use map it will be more easy, like this:

const ProfileDetail = ({user}) => (
  <Card className="container">
    {Object.keys(user).map((el,i) => <li key={i}>{el}: {user[el]}</li>)}
  </Card>
);

Suggestion:

1. When using for loop with object, variable will represent each key of the object so checking user.hasOwnProperty(key) i think is not required.

2. For loop will not return anything, you need to use some variable to push the ui-items in that, then return that variable after loop. Use map it will be easy as well as it will do the same task in less lines and you don't need a extra variable also.

Check this example:

let user = {a:1, b:2, c:3, d:4, e:5};
const ProfileDetail = ({user}) => {
    var createList = function(){
       let a = [];
       for (let key in user) {
          a.push(<li>{key}: {user[key]}</li>)
       }
       return a;
    }
    return (
       <ul>
           {createList()}
           
           ------By using map------
           {
             Object.keys(user).map(el => <li key={el}>{el}: {user[el]} </li>)
           }
           
      </ul>
   ) 
}

ReactDOM.render(<ProfileDetail user={user}/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>