CODEWITHSUNDEEP
javascriptreactjsmeteormeteor-react
Meteor_UN666
Meteor_UN666

Reputation: 39

METEOR REACT SEARCH and DISPLAY onChange user input need help solving error

this is the input code: 

Title: <input type="text" ref="searchTitle" onChange={this.searchTitle}/>

this is the onChange event handler: 

searchTitle(event) {
    this.setState({
      show_article_editable_list: <Article_Editable_List articleTitle={event.target.value}/>,
    });
  }

this is the subscribe method with the event value from previous code: 

export default createContainer( (props) => {
  const articleTitle = props.articleTitle;
  Meteor.subscribe('search_results', articleTitle);

  return { articles: Articles.find({}).fetch() };
}, Article_Editable_List);

this is where the publish method that gets arguments from the subscription: 

Meteor.publish('search_results', function (articleTitle) {
    if(articleTitle) {
      return Articles.find({articleTitle});
    }
  });

this is the collection code with an index:

export const Articles = new Mongo.Collection('articles');

if(Meteor.isServer) {
  Articles._ensureIndex({
    articleTitle: "text",
  });
}

this is the where to display the search results:

render() {
    return (
      this.props.articles.map( (article) => {
        const dateCreated = article.createdAt.toString();
        const dateUpdated = article.updatedAt.toString();
        return (
          <div key={article._id} className="article_list_editable">
            <h1>{article.articleTitle}</h1>
            <br/>
            <h1>{article.articleAuthor}</h1>
            <div>{dateCreated}</div>
            <div>{dateUpdated}</div>
            <div>{article.articleType}</div>
          </div>
        )
      })
    )
  }

this is the error that needs to be solve

Error: Article_Editable_List.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Upvotes: 0

Views: 199

Answers (1)

Andrii Starusiev
Andrii Starusiev

Reputation: 7764

It's look like you need to wrap map in some wrapper like

 render() {
        return (
          <div>{
            this.props.articles.map( (article) => {
            const dateCreated = article.createdAt.toString();
            const dateUpdated = article.updatedAt.toString();
            return (
              <div key={article._id} className="article_list_editable">
                <h1>{article.articleTitle}</h1>
                <br/>
                <h1>{article.articleAuthor}</h1>
                <div>{dateCreated}</div>
                <div>{dateUpdated}</div>
                <div>{article.articleType}</div>
              </div>
            )
          }
        )
      }</div>
    )
  }

Because map return array, but you can return only single component, not array.

Upvotes: 1

Related Questions