(react)Converting class to hooks

JavaScript
#1

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("")

  

  }

  

  useEffect(()=>{

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

    fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')

    .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)];

      this.setState({

        currentQuote: newQuote.quote,

        currentAuthor: newQuote.author,

        quotes: quotes,

        color: newColor,

      });

    })

    .catch(console.log);

    // 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})

  }
#2

hey @joshkwannacode,

so instead of this,

you would have it like this instead

  setCurrentQuote(newQuote.quote)
  setCurrentAuthor(newQuote.author)
  setQuotes(quotes)
  setColor(newColor)

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

1 Like
#3

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)]
  }
#4

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

1 Like
#5

nvm man i fixed it haha

1 Like
#6