title: Error: Function components cannot have refs. Did you mean to use React.forwardRef()?
body: <p>I am getting the error </p>
  
  <blockquote>
    <p>Error: Function components cannot have refs. Did you mean to use
    React.forwardRef()?</p>
  </blockquote>
  
  <p>And if you check my code it is correct. I am also passing even and it says </p>
  
  <blockquote>
    <p>Line 91:  Unexpected use of 'event'  no-restricted-globals</p>
  </blockquote>
  
  <p>If I am doing something wrong I do not know. According to my research I found that there is some version issue maybe or not. I am using the latest version of <strong>create react app</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { AuthUserContext } from '../Session';
  import { withFirebase } from '../Firebase';
  import NewsList from './NewsList';
  
  import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator';
  import { Container, Card, CardContent, Button } from '@material-ui/core';
  import Form from 'react-bootstrap/Form';
  
  class News extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        newsTitle: '',
        newsDescription: '',
        news: [],
        limit: 5,
        loading: false,
        submitted: false,
        error: null,
      };
    }
  
    componentDidMount() {
      this.onListenForNews();
    }
  
    onListenForNews = () =&gt; {
      this.setState({ loading: true });
  
      this.props.firebase
        .news()
        .orderByChild('createdAt')
        .limitToLast(this.state.limit)
        .on('value', snapshot =&gt; {
          const newsObject = snapshot.val();
  
          if (newsObject) {
            const newsLis = Object.keys(newsObject).map(key =&gt; ({
              ...newsObject[key],
              uid: key,
            }));
  
            this.setState({
              news: newsLis,
              loading: false,
            });
          } else {
            this.setState({ news: null, loading: false });
          }
        });
    };
  
    componentWillUnmount() {
      this.props.firebase.news().off();
    }
  
    handleChange = (event) =&gt; {
      this.setState({ [event.target.name]: event.target.value });
    };
  
    onCreateNews = (event, authUser) =&gt; {
      this.props.firebase.news().push({
        newsTitle: this.state.newsTitle,
        newsDescription: this.state.newsDescription,
        userId: authUser.uid,
        createdAt: this.props.firebase.serverValue.TIMESTAMP,
      });
  
      this.setState({
        newsTitle: '',
        newsDescription: '',
        error: null,
        submitted: true,
      });
  
      event.preventDefault();
    };
  
    onEditNews = (news, newsTitle, newsDescription) =&gt; {
      this.props.firebase.news(news.uid).set({
        ...news,
        newsTitle,
        newsDescription,
        editedAt: this.props.firebase.serverValue.TIMESTAMP,
      });
    };
  
    onRemoveNews = uid =&gt; {
      this.props.firebase.news(uid).remove();
    };
  
    onNextPage = () =&gt; {
      this.setState(
        state =&gt; ({ limit: state.limit + 5 }),
        this.onListenForNews,
      );
    };
  
    render() {
      const { users } = this.props;
      const { newsTitle, newsDescription, news, loading, submitted, error } = this.state;
  
      return (
        &lt;AuthUserContext.Consumer&gt;
          {authUser =&gt; (
            &lt;div&gt;
              {!loading &amp;&amp; news &amp;&amp; (
                &lt;button type="button" onClick={this.onNextPage}&gt;
                  More
                &lt;/button&gt;
              )}
  
              {loading &amp;&amp; &lt;div&gt;Loading ...&lt;/div&gt;}
  
              {news &amp;&amp; (
                &lt;NewsList
                  news={news.map(news =&gt; ({
                    ...news,
                    user: users
                      ? users[news.userId]
                      : { userId: news.userId },
                  }))}
                  onEditNews={this.onEditNews}
                  onRemoveNews={this.onRemoveNews}
                /&gt;
              )}
  
              {!news &amp;&amp; &lt;div&gt;There are no messages ...&lt;/div&gt;}
  
              &lt;Container maxWidth="lg"&gt;
                  &lt;ValidatorForm
                      ref="form"
                      onSubmit={event =&gt;
                        this.onCreateNews(event, authUser)
                      }
                  &gt;
                      &lt;div&gt;
                          {error &amp;&amp; (
                              &lt;div className="alert alert-danger" role="alert"&gt;
                                  {error.message}
                              &lt;/div&gt;
                          )}
                          &lt;Card&gt;
                              &lt;CardContent&gt;
                                  &lt;Form.Group&gt;
                                      &lt;TextValidator
                                          label="News Title"
                                          onChange={this.handleChange}
                                          name="newsTitle"
                                          type="text"
                                          value={newsTitle}
                                          variant="outlined"
                                          fullWidth={true}
                                          validators={['required']}
                                          errorMessages={['New title field is required', 'News title is not valid']}
                                      /&gt;
                                  &lt;/Form.Group&gt;
                                  &lt;Form.Group&gt;
                                      &lt;TextValidator
                                          label="Description"
                                          onChange={this.handleChange}
                                          name="newsDescription"
                                          type="text"
                                          value={newsDescription}
                                          variant="outlined"
                                          fullWidth={true}
                                          validators={['required']}
                                          errorMessages={['Description field is required']}
                                      /&gt;
                                  &lt;/Form.Group&gt;
                                  &lt;Form.Group&gt;
                                      &lt;Button
                                          color="primary"
                                          variant="contained"
                                          type="submit"
                                          fullWidth={true}
                                          size="large"
                                          disabled={submitted}
                                      &gt;
                                          {
                                              (submitted &amp;&amp; 'Signing In - Redirecting')
                                              || (!submitted &amp;&amp; 'Sign In')
                                          }
                                      &lt;/Button&gt;
                                  &lt;/Form.Group&gt;
                              &lt;/CardContent&gt;
                          &lt;/Card&gt;
                      &lt;/div&gt;
                  &lt;/ValidatorForm&gt;
              &lt;/Container&gt;
            &lt;/div&gt;
          )}
        &lt;/AuthUserContext.Consumer&gt;
      );
    }
  }
  
  export default withFirebase(News);
  </code></pre>