How to loop an object in React?

by

The problem is the way you’re using forEach(), as it will always return undefined. You’re probably looking for the map() method, which returns a new array:

var tifOptions = Object.keys(tifs).map(function(key) {
    return <option value={key}>{tifs[key]}</option>
});

If you still want to use forEach(), you’d have to do something like this:

var tifOptions = [];

Object.keys(tifs).forEach(function(key) {
    tifOptions.push(<option value={key}>{tifs[key]}</option>);
});

Update:

If you’re writing ES6, you can accomplish the same thing a bit neater using an arrow function:

const tifOptions = Object.keys(tifs).map(key => 
    <option value={key}>{tifs[key]}</option>
)

Here’s a fiddle showing all options mentioned above: https://jsfiddle.net/fs7sagep/

More Related Contents:

  1. How to add function in JSX?
  2. Why is setState in reactjs Async instead of Sync?
  3. Fetch request to local file not working
  4. React – User-Defined JSX Components Not rendering
  5. Where can I make API call with hooks in react?
  6. How to have conditional elements and keep DRY with Facebook React’s JSX?
  7. How can I force a component to re-render with hooks in React?
  8. Detecting when user scrolls to bottom of div with React js
  9. Executing async code on update of state with react-hooks
  10. onClick doesn’t render new react component.
  11. Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
  12. React.js – Syntax error: this is a reserved word in render() function
  13. How do I access store state in React Redux?
  14. onClick works but onDoubleClick is ignored on React component
  15. Is componentDidMount of parent called after all componentDidMount of children?
  16. Error “Error: A is only ever to be used as the child of element”
  17. How to use React.forwardRef in a class based component?
  18. Retrieving value from with multiple option in React
  19. Images not loading when relative path is used in React
  20. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  21. Can’t call setState on a component that is not yet mounted
  22. Redux Presentational Components Vs Container Component
  23. Converting Responsive Grid Layout to Plotly Dash
  24. Bootstrap modal in React.js
  25. UseEffect being called multiple times
  26. How to Access styles from React?
  27. Is it possible to pass context into a component instantiated with ReactDOM.render?
  28. Firebase-Admin, importing it to react application throws Module not found error
  29. How to prevent Next.js from instantiating a singleton class/object multiple times?
  30. How to dynamically import SVG and render it inline

Leave a Comment