-
material-ui-docs
⚠️ Please don't submit PRs here as they will be closed. To edit the docs or source code, please use the main repository:
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
import { useEffect, useState } from "react"; import axios from "axios"; import "./App.css"; import InfiniteScroll from "react-infinite-scroll-component"; import CharacterCard from "./components/Card"; function App() { const [characters, setCharacters] = useState([]); const [page, setPage] = useState(1); const [hasMore, setHasMore] = useState(true); const [totalPages, setTotalPages] = useState(1); const fetchData = async () => { if (page == totalPages + 1) { setHasMore(false); return; } // <-----------------------------------------------> // waiting for 1 second before fetching data to show loading spinner, you can skip this await new Promise((resolve) => setTimeout(resolve, 1000)); // <-----------------------------------------------> const res = await axios.get( `https://rickandmortyapi.com/api/character?page=${page}` ); setCharacters((prevPosts) => [...prevPosts, ...res.data.results]); setTotalPages(res.data.info.pages); setPage((prevPage) => prevPage + 1); }; useEffect(() => { fetchData(); }, []); return (
Rick and Morty characters!h1> Loading...h4>} endMessage={
Yay! You have seen it allb> p> } > {/* Map over characters array and return JSX */} {characters.map((character, index) => ( ))} InfiniteScroll> div> ); } export default App;
I'll be using Material UI for styling the cards. You can install it by visiting the Material UI installation guide.
Related posts
-
It's not much but it's mine. Rick and Morty info app. Feedback/code review welcome!
-
Does anybody know the API documentation tool used to build the Rick and Morty API?
-
5 Things I wanted to know about REST API when I was starting
-
How to Implement Rate Limiting in Express for Node.js
-
Make your Azure OpenAI apps compliant with RBAC