Task: "Write a simple React application that fetches the data from the selected API and displays it as a list/table. When clicking on an item in the list/table, more deatils about that item should be displayed. Details about the item should be fetched by clicking on that item and displayed on a separate page."
So far I've managed to fetch data from the selected API and display it as a list. Any ideas how do I make second part of task? Here's the code:
import React from "react";
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
DataisLoaded: false
};
}
componentDidMount() {
fetch("https://api.thecatapi.com/v1/breeds")
.then((res) => res.json())
.then((json) => {
this.setState({
items: json,
DataisLoaded: true
});
})
}
render() {
const { DataisLoaded, items } = this.state;
if (!DataisLoaded) return <div>
<h1> Pleses wait some time.... </h1> </div> ;
return (
<div className = "App">
<h1> Fetching data from an TheCatApi </h1> {
items.map((item) => (
<ul>
<li>
{ item.name }
</li>
</ul>
))
}
</div>
);
}
}
export default App;
CodePudding user response:
You'll need to use Link.
<Link to="/yourPageDetail item.(info you're sending over) ">
<ul>
<li>
{ item.name }
</li>
</ul>
</Link>
You'll also need to use "useparams" on the "yourPageDetail" to capture the ... item.(info you're sending over).
If you need more details I'm happy to share a project repository. lmk
CodePudding user response:
- Wrap each
li
tag in ana
tag to redirect to/new-page
when the item is clicked - Add an
onClick
event to eachli
tag to save the item to localStorage when it's clicked
App.js
const App = () => {
const [items, setItems] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const handleCatRedirect = (cat) => {
const handleClick = () => {
localStorage.setItem("cat", JSON.stringify(cat));
}
return handleClick;
}
useEffect(() => {
const fetchCats = async () => {
setIsLoading(true);
const res = await fetch("https://api.thecatapi.com/v1/breeds")
const data = await res.json();
setItems(data);
setIsLoading(false);
};
fetchCats();
}, []);
if(isLoading)
return <div>Loading...</div>
return (
<div className="App">
<h1>Fetching data from an TheCatApi</h1>
<ul>
{items.map(item => (
<a href="/new-page">
<li onClick={handleCatRedirect(item)}>
{item.name}
</li>
</a>
))}
</ul>
</div>
);
};
- On
/new-page
, load thecat
fromlocalStorage
into the state to use on that new page.
NewPage.js (/new-page)
const NewPage = () => {
// Load cat from localStorage when /new-page mounts
const [cat, setCat] = useState(() => {
const cat = localStorage.getItem("cat");
if(!cat)
return null;
return JSON.parse(cat);
});
// Display cat details on new page
return (
<>
</>
)
};