2

Please , am having some error that is proving diffcult to fix for me. I have a simple react component below

import React from 'react';

const ForumPostComponent = (topics) => {
    const {forums} = topics;

    return (
            forums.toJS().map((forum, key) => {
                console.log(forum);
                    return ( 
                        <div className="post" key={key}>
                     )
                })


    )
}

In another component, i used my react forumComponent like .

<ForumPostComponent forums={this.props.forums.get('forums')} />

It throws the error in the title. Also My console message in the forum component returns values . I tried and read many similar questions all to no aveil. Please what exactly am i missing.?

Nuru Salihu
  • 4,756
  • 17
  • 65
  • 116

1 Answers1

3

Array is not valid react element, you need to wrap with some container. E.g. <div>:

return (
  <div>
    {forums.toJS().map((forum, key) => {
      console.log(forum);
      return ( 
        <div className="post" key={key} />
      )
    })}
  </div>
)

Furthermore using array indexes as elements keys is a bad practice. You should use some business keys instead.

madox2
  • 49,493
  • 17
  • 99
  • 99
  • You should add that using the array index for `key` here is bad practice. And also close the `div` properly :) – Chris May 11 '17 at 14:30
  • 1
    @nuru-salihu, you may find [this](http://stackoverflow.com/a/43892905/2030321) interesting as well. – Chris May 11 '17 at 14:38