(react)Converting class to hooks

I am trying to convert some code with class to hooks for educational purposes and i am having some trouble changing the state parts, could anyone plz help?

import React, {useState, useEffect} from 'react'

import ReactDOM from 'react-dom'

const COLORS = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"]

function Quotes(){

  const [currentQuote, setCurrentQuote] = useState("")

  const [currentAuthor, setCurrentAuthor]= useState("")

  const [quote, setQuotes]= useState("")

  const [color, setColor]= useState("")





    let newColor = COLORS[Math.floor(Math.random() * COLORS.length)];


    .then(res => res.json())

    .then((data) => {

      // this.setState({ quotes: data.quotes })

      let quotes = data.quotes.map((quote) => {

        return (

          {quote: quote.quote, author: quote.author}



      let newQuote = quotes[Math.floor(Math.random() * quotes.length)];


        currentQuote: newQuote.quote,

        currentAuthor: newQuote.author,

        quotes: quotes,

        color: newColor,




    // document.getElementById('container').style = 'background-color: blue';



  randomQuote() {

    let newQuote = this.state.quotes[Math.floor(Math.random() * this.state.quotes.length)];

    let newColor = COLORS[Math.floor(Math.random() * COLORS.length)]

    this.setState({currentQuote: newQuote.quote, currentAuthor: newQuote.author, color: newColor})


hey @joshkwannacode,

so instead of this,

you would have it like this instead


you will also have to move your useEffect and stuff inside of your Quotes component too

1 Like

thanks for that, i still have a bit problem idk how to get rid of the error for calling random quote could u help plz

const randomQuote()=>{
    let newQuote = quotes[Math.floor(Math.random() * quotes.length)]
    let  newColor = COLORS[Math.floor(Math.random() * COLORS.length)]

@joshkwannacode what error is it? what are you expecting the function to do? need some more info mate

1 Like

nvm man i fixed it haha

1 Like