I want to show this advice from this API I have fetched all the data but when I try to show it, it throws the error, and also I tried to map the data but nothing works it shows errors
import React, { useState, useEffect } from 'react';
export default function App() {
const [advices, setAdvices] = useState([]);
console.log(advices); // you should have the fetch data here
async function fetchData() {
try {
const response = await fetch('https://api.adviceslip.com/advice');
const data = await response.json();
setAdvices(data.slip);
} catch (error) {
console.error(error);
}
}
useEffect(() => {
fetchData();
}, []);
return <></>;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>import React, {
useState,
useEffect
} from 'react';
export default function App() {
const [advices, setAdvices] = useState([]);
//advices will always be null here as initiated with empty array
console.log(advices); // you should have the fetch data here
async function fetchData() {
try {
const response = await fetch("http://jsonplaceholder.typicode.com/Posts");
const data = await response.json();
setAdvices(data);
} catch (error) {
console.error(error);
}
}
useEffect(() => {
fetchData();
}, []);
useEffect(() => {
console.log(advices);
}, [advices]);
return ( < > Test < />);
}the initial value of advice should be an object and there was not another serious problem codesand box link
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [advices, setAdvices] = useState([]);
console.log(advices); // you should have the fetch data here
async function fetchData() {
try {
const response = await fetch("https://api.adviceslip.com/advice");
const data = await response.json();
setAdvices(data.slip);
} catch (error) {
console.error(error);
}
}
useEffect(() => {
fetchData();
}, []);
return (
<div className="App">
<h1>{advices.advice}</h1>
</div>
);
}