title: How to resolve errors in my Search component? React + Firebase
body: <p>Got an interesting problem and I dont know how to solve it. I built a Search component in my react app that searches in my Firebase realtime database and gives back the posts based on the search value.</p>
  
  <p>It works fine but when I actually search for something, even though it returns the results correctly, it gives me a bunch of errors. (I'll paste them below)</p>
  
  <p>Not sure what I'm doing wrong here...</p>
  
  <p>My component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import _ from 'lodash';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { Search } from 'semantic-ui-react';
  
  import { db } from '../../firebase';
  
  class SearchSection extends Component {
      componentWillMount() {
          this.resetComponent();
      }
  
      componentDidMount() {
          const { onSetPosts } = this.props;
  
          db.onGetPosts().on('value', snapshot =&gt; onSetPosts(snapshot.val()));
      }
  
      resetComponent = () =&gt;
          this.setState({ isLoading: false, results: [], value: '' });
  
      handleResultSelect = (e, { result }) =&gt;
          this.setState({ value: result.createdBy });
  
      handleSearchChange = (e, { value }) =&gt; {
          const { posts } = this.props;
  
          this.setState({ isLoading: true, value });
  
          // eslint-disable-next-line
          setTimeout(() =&gt; {
              if (value.length &lt; 1) return this.resetComponent();
  
              const re = new RegExp(_.escapeRegExp(value), 'i');
              const isMatch = result =&gt; re.test(result.createdBy);
  
              this.setState({
                  isLoading: false,
                  results: _.filter(posts, isMatch)
              });
          }, 300);
      };
  
      render() {
          const { isLoading, value, results } = this.state;
  
          const resultRenderer = ({ createdAt, createdBy, message }) =&gt; (
              &lt;div&gt;
                  &lt;p&gt;{createdBy}&lt;/p&gt;
                  &lt;p&gt;{createdAt}&lt;/p&gt;
                  &lt;p&gt;{message}&lt;/p&gt;
              &lt;/div&gt;
          );
  
          resultRenderer.propTypes = {
              createdAt: PropTypes.number,
              createdBy: PropTypes.string,
              message: PropTypes.string
          };
  
          return (
              &lt;Search
                  loading={isLoading}
                  onResultSelect={this.handleResultSelect}
                  onSearchChange={_.debounce(this.handleSearchChange, 500, {
                      leading: true
                  })}
                  results={results}
                  resultRenderer={resultRenderer}
                  value={value}
              /&gt;
          );
      }
  }
  
  /* Connect the state to this component */
  const mapStateToProps = state =&gt; ({
      posts: state.postState.posts
  });
  
  /* This is to store the users coming from the database to the Redux store */
  const mapDispatchToProps = dispatch =&gt; ({
      onSetPosts: posts =&gt; dispatch({ type: 'POSTS_SET', posts })
  });
  
  SearchSection.propTypes = {
      onSetPosts: PropTypes.func.isRequired,
      posts: PropTypes.shape({
          createdAt: PropTypes.number,
          createdBy: PropTypes.string,
          lastModifiedAt: PropTypes.number,
          message: PropTypes.string,
          uid: PropTypes.string
      }).isRequired
  };
  
  export default connect(
      mapStateToProps,
      mapDispatchToProps
  )(SearchSection);
  </code></pre>
  
  <p>Here I'm getting the POSTS from the redux store and using them as prop for the component. </p>
  
  <p>This is the results that I'm getting when I search for something:
  <a href="https://i.stack.imgur.com/Mmorj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mmorj.png" alt="results"></a></p>
  
  <p>The errors I'm getting are: </p>
  
  <p><code>Warning: Failed prop type: Invalid prop 'results' supplied to 'Search'.</code></p>
  
  <p><code>Warning: Failed prop type: The prop 'title' is marked as required in 'SearchResult', but its value is 'undefined'.</code></p>
  
  <p><code>Warning: Each child in an array or iterator should have a unique "key" prop.</code></p>
  
  <p><code>Warning: React does not recognize the 'createdAt' prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase 'createdat' instead. If you accidentally passed it from a parent component, remove it from the DOM element.</code></p>
  
  <p>I get this last error 4 times, for all my fields in the results .. createdAt, createdBy, lastmodifiedAt, message .. even though I'm not passing these props directly.</p>
  
  <p>If that helps, i'm trying to use semantic ui react's search component.
  <a href="https://react.semantic-ui.com/modules/search/" rel="nofollow noreferrer">https://react.semantic-ui.com/modules/search/</a></p>
  
  <p>Please let me know if you need any other information.</p>
  
  <p>EDIT: The SearchResult component if needed: <a href="https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Search/SearchResult.js" rel="nofollow noreferrer">https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Search/SearchResult.js</a>
  (It is predefined by semantic)</p>