React. I am trying to set the default state of quote to to an array containing one random object fro-CodePudding

I am trying to set the default value of quote to a random quote from our quotes list on luanch. Currently on luanch we retrive our data and set it to quotes. Our window has no quote displayed untill we click our button. I want to have a defualt value for quote so when we launch I have a random quote displayed.

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

const QuoteGenerator = () => {
    //Initializing quote and quotes
    const [quotes, setQuotes] = useState([])
    const [quote, setQuote] = useState([])
    //Fetching our quote list
    useEffect(() => {
         fetch('https://jsonplaceholder.typicode.com/posts')
            .then(res => res.json())
            .then(data => setQuotes([...data]))
}, [])

//This function is used to update the current quote displayed to a new quote when our button 
//is clicked
const setNewQuote = () => {
    const index = Math.floor(Math.random() * 100)
    return setQuote(quotes.slice(index, index   1 ))
}
//On launch quoteEntry is an empty array.
//I want to set the default state of quote to a random array from quotes containing one 
//object.
const quoteEntry = quote.map(item => (
    <div key={item.id}>
        <h3>{item.title}</h3>
    </div>
))
return (
//What you see in browser
    <div>
        <h1>Your Quote</h1>
        <br />
        <div>
            <h5>{quoteEntry}</h5>
        </div>
        <br />
        <button onClick={setNewQuote}>New quote</button>
    </div>
)
}

export default QuoteGenerator

CodePudding user response：

You can try something like this

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

    const QuoteGenerator = () => {
      //Initializing quote and quotes
      const [quotes, setQuotes] = useState([]);
      const [quote, setQuote] = useState([]);
      //Fetching our quote list
      useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts")
          .then((res) => res.json())
          .then((data) => {
            setQuotes([...data]);
            const index = Math.floor(Math.random() * 100);
            setQuote([...data.slice(index, index   1)]);
          });
      }, []);
    
      //This function is used to update the current quote displayed to a new quote when our button
      //is clicked
      const setNewQuote = () => {
        const index = Math.floor(Math.random() * 100);
        setQuote(quotes.slice(index, index   1));
      };
      //On launch quoteEntry is an empty array.
      //I want to set the default state of quote to a random array from quotes containing one
      //object.
      function quoteEntry() {
        return quote.map((item) => (
          <div key={item.id}>
            <h3>{item.title}</h3>
          </div>
        ));
      }
      return (
        //What you see in browser
        <div>
          <h1>Your Quote</h1>
          <br />
          <div>
            <h5>{quoteEntry()}</h5>
          </div>
          <br />
          <button onClick={setNewQuote}>New quote</button>
        </div>
      );
    };
    
    export default QuoteGenerator