CODEWITHSUNDEEP
reactjs
Nuru Salihu
Nuru Salihu

Reputation: 4928

A valid react element or null must be returned -- Reactjs error

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.?

Upvotes: 2

Views: 640

Answers (1)

madox2
madox2

Reputation: 51851

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.

Upvotes: 3

Related Questions