This the first project that created by following allow with the instructor:
index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
App.js
import { useEffect, useState } from "react"
export default function App(){
const [advice, setAdvice] = useState("");
const [count, setCount] = useState(0);
async function getAdvice(){
const res = await fetch('https://api.adviceslip.com/advice');
const data = await res.json();
setAdvice(data.slip.advice);
setCount((c) => c + 1);
}
useEffect(function () {
getAdvice();
}, []);
return (
<div>
<h1>{ advice }</h1>
<button onClick={getAdvice}>Get Advice </button>
<Message count={count}/>
</div>
);
}
function Message(props){
return (
<p>
You have read <strong>{props.count}</strong> pieces of advice
</p>
);
}
Top comments (0)