reactjs - how can I modify this const with useStated and make it work

Question

how can I modify this const with useStated and make it work? I am converting a code that was previously in a function and now I have moved to a component, and I am not able to make these two const work ... if someone can help me thank you in advance

code where i have difficulty:

 const [message, updateMessage] = this.useState('')
        const [messages, updateMessages] = this.useState([])

full code:

class Lobby extends Component {

constructor() {
    super();
    this.state = {
    };
    
    const [message, updateMessage] = useState('')
    const [messages, updateMessages] = useState([])
   
    this.useEffect(() => {
        const handleNewMessage = newMessage =>
            updateMessages([...messages, newMessage])
        socket.on('chat.message', handleNewMessage)
        return () => socket.off('chat.message', handleNewMessage)
    }, [messages]);

  
    this.handleFormSubmit = event => {
        event.preventDefault()
        if (message.trim()) {
            socket.emit('chat.message', {
                userid: myId,
                lobby,
                username: username,
                message
            })
            updateMessage('')    
        }
    }
     this.handleInputChange = event =>
updateMessage(event.target.value)

this.handleTesteChange = event =>
updateMessage(event.target.value)


 this.handleTesteSubmit = event => {
    event.preventDefault()
    if (message.trim()) {
        socket.emit('chat.message', {
            userid: myId,
            message
            
        })

        updateMessage('') 
       
    }
}
  }   

error:

TypeError: this.state is not a function or its return value is not iterable

 31 | this.state = {
  32 | };
  33 | 
> 34 | const [message, updateMessage] = this.state('')
     | ^  35 | const [messages, updateMessages] = this.state([])
  36 | 
  37 | this.useEffect(() => {

question from:https://stackoverflow.com/questions/65928321/how-can-i-modify-this-const-with-usestated-and-make-it-work

Answer 1

You cannot use hooks inside class component. Use functional components instead:

const Lobby = () => {
    const [message, updateMessage] = useState('')
    const [messages, updateMessages] = useState([])

    useEffect(() => {
        const handleNewMessage = newMessage =>
            updateMessages([...messages, newMessage])
        socket.on('chat.message', handleNewMessage)
        return () => socket.off('chat.message', handleNewMessage)
    }, [messages]);

    const handleFormSubmit = event => {
        event.preventDefault()
        if (message.trim()) {
            socket.emit('chat.message', {
                userid: myId,
                lobby,
                username: username,
                message
            })
            updateMessage('')    
        }
    }

    const handleInputChange = event => updateMessage(event.target.value);

    const handleTesteChange = event => updateMessage(event.target.value);

    const handleTesteSubmit = event => {
        event.preventDefault()
        if (message.trim()) {
            socket.emit('chat.message', {
                userid: myId,
                message
                
            })

            updateMessage('') 
        
        }
    }

    return (
        <div>
            {/* Code */}
        </div>
    )
}

Find more information here: https://reactjs.org/docs/hooks-intro.html

If what you want is to use class components, then you can do this:

class Lobby extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: '',
            messages: []
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.messages !== this.state.messages){
            const handleNewMessage = newMessage => this.setState({messages: ([...messages, newMessage])})
            socket.on('chat.message', handleNewMessage)
            return () => socket.off('chat.message', handleNewMessage)
        }
    }
    
    handleFormSubmit = event => {
        event.preventDefault()
        if (message.trim()) {
            socket.emit('chat.message', {
                userid: myId,
                lobby,
                username: username,
                message
            })
            this.setState({message: ''});
        }
    }

    handleInputChange = event => this.setState({message: event.target.value});

    handleTesteChange = event => this.setState({message: event.target.value});

    handleTesteSubmit = event => {
        event.preventDefault()
        if (message.trim()) {
            socket.emit('chat.message', {
                userid: myId,
                message
                
            })

            this.setState({message: ''});
        
        }
    }
    
}