How to loop and render elements in React.js without an array of objects to map?

by

Updated: As of React > 0.16

Render method does not necessarily have to return a single element. An array can also be returned.

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className="indent" key={i}></span>);
}
return indents;

OR 

return this.props.level.map((item, index) => (
    <span className="indent" key={index}>
        {index}
    </span>
));

Docs here explaining about JSX children

OLD:

You can use one loop instead 

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className="indent" key={i}></span>);
}
return (
   <div>
    {indents}
    "Some text value"
   </div>
);

You can also use .map and fancy es6

return (
   <div>
    {this.props.level.map((item, index) => (
       <span className="indent" key={index} />
    ))}
    "Some text value"
   </div>
);

Also, you have to wrap the return value in a container. I used div in the above example

As the docs say here

Currently, in a component’s render, you can only return one node; if you have, say, a list of divs to return, you must wrap your components within a div, span or any other component.

More Related Contents:

  1. How to pass props to {this.props.children}
  2. ReactJS convert HTML string to JSX
  3. React / JSX Dynamic Component Name
  4. How to use JQuery with ReactJS
  5. What is the right way to use Jquery in React?
  6. what is right way to do API call in react js?
  7. TypeError: Cannot read property ‘setState’ of undefined
  8. ReactJS SyntheticEvent stopPropagation() only works with React events?
  9. How to have conditional elements and keep DRY with Facebook React’s JSX?
  10. ReactJS: “Uncaught SyntaxError: Unexpected token
  11. React JS onClick event handler
  12. Get image preview before uploading in React
  13. Jquery in React is not defined
  14. Using JQuery plugins that transform the DOM in React Components?
  15. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  16. Set React Input Field Value from JavaScript or JQuery
  17. How to capture the Print Event?
  18. Run javascript function when user finishes typing instead of on key up?
  19. Why is it a bad practice to return generated HTML instead of JSON? Or is it?
  20. How to access component methods from “outside” in ReactJS?
  21. Show a progress bar for downloading files using XHR2/AJAX
  22. How to get a count of all checked checkboxes on a page
  23. Load Image from javascript
  24. jquery select iframe children
  25. How to find the indexes of all occurrences of an element in array?
  26. Setting new value for an attribute using jQuery
  27. How to set initial state for useState Hook in jest and enzyme?
  28. jQuery Autocompletion with Eclipse Juno Java EE
  29. Queue AJAX calls
  30. How to post ASP.NET MVC Ajax form using JavaScript rather than submit button

Leave a Comment