0

I am new to React and wanted to use forEach loop in JSX but no result. Here is the code:

class Car extends React.Component {
  render() {
    let list = ["Thing one", "Thing Two", "Thing Three"];
    return (
      <div>
        {list.forEach(function(item) {
          <h1>{item}</h1>;
        })}
      </div>
    );
  }
}

const box = document.querySelector(".mir");

ReactDOM.render(<Car list />, box);
mobi
  • 13
  • 1
  • 1
    Use `.map` and `return` the JSX generated inside of the mapper. – Jonas Wilms Aug 18 '19 at 11:20
  • Also the `list` in `` is unneccesaary, as that passes a boolean with the props that is never used. – Jonas Wilms Aug 18 '19 at 11:21
  • @JonasWilms, hi Jonas thank you for your comments, use only map. ForEach and for is not appropriate to be used in JSX? – mobi Aug 18 '19 at 11:21
  • No. `.forEach` provides no way to pass results from within the forEach to the outside, and a for statement can't be used in an expression context. See the duplicate for details. – Jonas Wilms Aug 18 '19 at 11:23
  • @JonasWilms, Jonas please can you briefly explain why we need to ensure returning. I just cannot get why to use return. Just briefly and simply. Thank you in advance:) – mobi Aug 18 '19 at 11:28
  • If you don't return from a function, it implicitly returns undefined. – Jonas Wilms Aug 18 '19 at 11:29
  • @JonasWilms, sorry Jonas, all is cool but a mere question. Ok, I used map() then it returned new array like this: ["

    {Thing one}

    ", "

    {Thing two}

    ", "

    {Thing three}

    "] Is that correct? if so, then how does renderer understands to put each element of that new array into respective h1 element. Again we got new array from map() and how does computer or renderer understand to separate each and put into respective array     – mobi Aug 18 '19 at 12:17
  • Have a look at Reacts sourcecode. – Jonas Wilms Aug 18 '19 at 12:18
  • @mobi It is simply the way that React is programmed to work. If there is an array of JSX elements, react will render them side by side. And, nested arrays create nested JSX elements, etc. It is most likely simply a device that the React programers came up with to allow us to iterate over objects and arrays in a way that helps us to render various data structures. – Maiya Sep 18 '19 at 23:40

1 Answers1

0

forEach doesn't return anything - use map and ensure you're returning:

{list.map(function(item) {
    return <h1>{item}</h1>;
})}
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
  • Ok, I used map() then it returned new array like this: ["

    {Thing one}

    ", "

    {Thing two}

    ", "

    {Thing three}

    "] Is that correct? if so, then how does renderer understands to put each element of that new array into respective h1 element. Again we got new array from map() and how does computer or renderer understand to separate each and put into respective array     – mobi Aug 18 '19 at 12:44
  • my second mere question, can I imagine that this code {list.map(function(item, index) { return

    {item}

    ; })} kinda will be replaced, after map() is executed, with this code ["

    Thing one

    ", "

    Thing Two

    ", "

    Thing Three

    "].     – mobi Aug 18 '19 at 12:50
  • please Jack I really need your help – mobi Aug 18 '19 at 14:54
  • It's just how the map function works. It's basic JavaScript - read up on array methods and it should become clearer. – Jack Bashford Aug 18 '19 at 14:55
  • no no Jack I got how map works. No problem :), I am asking about how does renderer understands to put each element of that new array created by map() into respective h1 element. That is it :) – mobi Aug 18 '19 at 14:57
  • Well that should be obvious if you know how map works, and it's got nothing to do with the renderer. The items are mapped from strings to headings, and each heading is closed, so you end up with an array of headings that are inserted into the page essentially verbatim. – Jack Bashford Aug 18 '19 at 14:59
  • Thanks Jack for your kind explanation:) – mobi Aug 18 '19 at 15:01