title: ReactJS - How to fix compile error in a chat app?
body: <p>After compiling I receive this error message:</p>
  <blockquote>
  <p>Failed to compile src\App.js   Line 4:1:  'state' is not defined
  no-undef</p>
  </blockquote>
  <p>Code App.js:</p>
  <pre><code>import Messages from &quot;./Messages&quot;;
  import Input from &quot;./Input&quot;
  import { useState } from 'react';
  import './App.css';
  
  const initialState = {
    messages: [
      {
        text: &quot;This is a test message!&quot;,
        member: {
          color: &quot;blue&quot;,
          username: &quot;bluemoon&quot;
        }
      }
    ],
    member: {
      username: randomName(),
      color: randomColor()
    }
  }
  
  function randomName() {
    const adjectives = [&quot;autumn&quot;, &quot;hidden&quot;, &quot;bitter&quot;, &quot;misty&quot;, &quot;silent&quot;, &quot;empty&quot;, &quot;dry&quot;, &quot;dark&quot;, &quot;summer&quot;, &quot;icy&quot;, &quot;delicate&quot;, &quot;quiet&quot;, &quot;white&quot;, &quot;cool&quot;, &quot;spring&quot;, &quot;winter&quot;, &quot;patient&quot;, &quot;twilight&quot;, &quot;dawn&quot;, &quot;crimson&quot;, &quot;wispy&quot;, &quot;weathered&quot;, &quot;blue&quot;, &quot;billowing&quot;, &quot;broken&quot;, &quot;cold&quot;, &quot;damp&quot;, &quot;falling&quot;, &quot;frosty&quot;, &quot;green&quot;, &quot;long&quot;, &quot;late&quot;, &quot;lingering&quot;, &quot;bold&quot;, &quot;little&quot;, &quot;morning&quot;, &quot;muddy&quot;, &quot;old&quot;, &quot;red&quot;, &quot;rough&quot;, &quot;still&quot;, &quot;small&quot;, &quot;sparkling&quot;, &quot;throbbing&quot;, &quot;shy&quot;, &quot;wandering&quot;, &quot;withered&quot;, &quot;wild&quot;, &quot;black&quot;, &quot;young&quot;, &quot;holy&quot;, &quot;solitary&quot;, &quot;fragrant&quot;, &quot;aged&quot;, &quot;snowy&quot;, &quot;proud&quot;, &quot;floral&quot;, &quot;restless&quot;, &quot;divine&quot;, &quot;polished&quot;, &quot;ancient&quot;, &quot;purple&quot;, &quot;lively&quot;, &quot;nameless&quot;];
    const nouns = [&quot;waterfall&quot;, &quot;river&quot;, &quot;breeze&quot;, &quot;moon&quot;, &quot;rain&quot;, &quot;wind&quot;, &quot;sea&quot;, &quot;morning&quot;, &quot;snow&quot;, &quot;lake&quot;, &quot;sunset&quot;, &quot;pine&quot;, &quot;shadow&quot;, &quot;leaf&quot;, &quot;dawn&quot;, &quot;glitter&quot;, &quot;forest&quot;, &quot;hill&quot;, &quot;cloud&quot;, &quot;meadow&quot;, &quot;sun&quot;, &quot;glade&quot;, &quot;bird&quot;, &quot;brook&quot;, &quot;butterfly&quot;, &quot;bush&quot;, &quot;dew&quot;, &quot;dust&quot;, &quot;field&quot;, &quot;fire&quot;, &quot;flower&quot;, &quot;firefly&quot;, &quot;feather&quot;, &quot;grass&quot;, &quot;haze&quot;, &quot;mountain&quot;, &quot;night&quot;, &quot;pond&quot;, &quot;darkness&quot;, &quot;snowflake&quot;, &quot;silence&quot;, &quot;sound&quot;, &quot;sky&quot;, &quot;shape&quot;, &quot;surf&quot;, &quot;thunder&quot;, &quot;violet&quot;, &quot;water&quot;, &quot;wildflower&quot;, &quot;wave&quot;, &quot;water&quot;, &quot;resonance&quot;, &quot;sun&quot;, &quot;wood&quot;, &quot;dream&quot;, &quot;cherry&quot;, &quot;tree&quot;, &quot;fog&quot;, &quot;frost&quot;, &quot;voice&quot;, &quot;paper&quot;, &quot;frog&quot;, &quot;smoke&quot;, &quot;star&quot;];
    const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
    const noun = nouns[Math.floor(Math.random() * nouns.length)];
    return adjective + noun;
  };
  
  function randomColor() {
    return '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
  };
  
  function App() {
    const [state, setState] = useState(initialState);
    
    const onSendMessage = message =&gt; { 
      const messages = state.messages
      messages.push({
        text: message,
        member: state.member
      })
      this.setState({messages: messages})
    }
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;App-header&quot;&gt;
          &lt;h1&gt;My Chat App&lt;/h1&gt;
        &lt;/div&gt;
        &lt;Messages
          messages={state.messages}
          currentMember={state.member}
        /&gt;
        &lt;Input
          onSendMessage={onSendMessage}
        /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Code Messages.js:</p>
  <pre><code>import {Component} from &quot;react&quot;;
  import React from &quot;react&quot;;
      
  import {Component} from &quot;react&quot;;
  import React from &quot;react&quot;;
  
  class Messages extends Component {
    renderMessage(message, index) {
      const { member, text } = message;
      const { currentMember } = this.props;
      const messageFromMe = member.id === currentMember.id;
      const className = messageFromMe
        ? &quot;Messages-message currentMember&quot;
        : &quot;Messages-message&quot;;
      return (
        &lt;li key={index} className={className}&gt;
          &lt;span className=&quot;avatar&quot; style={{ backgroundColor: member.color }} /&gt;
          &lt;div className=&quot;Message-content&quot;&gt;
            &lt;div className=&quot;username&quot;&gt;{member.username}&lt;/div&gt;
            &lt;div className=&quot;text&quot;&gt;{text}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      );
    }
  
    render() {
      const { messages } = this.props;
      return (
        &lt;ul className=&quot;Messages-list&quot;&gt;
          {messages.map((m, index) =&gt; this.renderMessage(m, index))}
        &lt;/ul&gt;
      );
    }
  }
  
  export default Messages;
  </code></pre>
  <p>Code Input.js</p>
  <pre><code>import {Component} from &quot;react&quot;;
  import React from &quot;react&quot;;
  
  class Input extends Component {
    state = {
      text: &quot;&quot;
    }
  
    onChange(e) {
      this.setState({text: e.target.value});
    }
  
    onSubmit(e) {
      e.preventDefault();
      this.setState({text: &quot;&quot;});
      this.props.onSendMessage?.(this.state.text);
    }
    
    render() {
      return (
        &lt;div className=&quot;Input&quot;&gt;
          &lt;form onSubmit={e =&gt; this.onSubmit(e)}&gt;
            &lt;input
              onChange={e =&gt; this.onChange(e)}
              value={this.state.text}
              type=&quot;text&quot;
              placeholder=&quot;Enter your message and press ENTER&quot;
              autofocus=&quot;true&quot;
            /&gt;
            &lt;button&gt;Send&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Input;
  </code></pre>
  <p>It's a simple project, but I'm new to programing and I would appreciate your help. I have added the component Messages so we can fast find the solution. I think that adding the CSS is not necessary.</p>