I use a React template in frontend and a laravel in backend, I want to get data from URL using fetch().
In controller I do a test like that:
public function index()
{
return response()->json([
'name' => 'Abigail',
'state' => 'CA',
]);
}
Web.php :
Route::get('/home', [PostController::class,'index']); //http://localhost:8000/home
in frontend I called the url in index.jsx like that :
......
import React, { useEffect, useState } from "react";
const TeamStats = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const url = "http://localhost:8000/home";
const fetchData = async () => {
try {
const response = await fetch(url);
const json = await response.json();
const {results} = json;
// Only put the results in state, ie, the actual users array
setUsers(results);
} catch (error) {
console.log("error", error);
}
};
fetchData();
}, []);
const {theme} = useThemeProvider();
const {width} = useWindowSize();
const data = [
{label: 'Wins', shortLabel: 'W', value: 17},
{label: 'Draws', shortLabel: 'D', value: 29},
{label: 'Losses', shortLabel: 'L', value: 74},
]
return (
<Spring ......
......
.....
<h2 className={`${styles.club} text-20 text-black text-overflow`}>Brussia</h2>
{users && users.map((user) => (
<h4 className="text-black text-overflow">{user.name}</h4>
))}
</div>
<div className="d-flex flex-wrap g-20">
{
data.map((item, index) => (
<StatsBadge key={index}
label={width >= 1024 ? (width >= 1500 && width < 1920 ? item.shortLabel : item.label) : item.shortLabel}
value={item.value}/>
))
}
</div>
</div>
</Spring>
)
}
export default TeamStats
After correcting all errors, I can’t get any result in frontend page just empty, also I can’t change the code because is a template already created, I mean I can’t change const TeamStats = () => { by function()?
