Use with React
Using with React.js is super easy and simple
If you are a React.js developer, here is an example of how you can utilize the App Backend API within your React application. This code snippet showcases the integration of the API to fetch and display user data.
import React, { useEffect, useState } from 'react';
const UserList = () => {
const [users, setUsers] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
useEffect(() => {
// Fetch users from the API
const apiUrl = `https://v1.appbackend.io/v1/rows/wNqz0X6nz6pr${
searchTerm ? `/search?q=${encodeURIComponent(searchTerm)}` : ''
}`;
fetch(apiUrl)
.then((response) => response.json())
.then((data) => setUsers(data.data))
.catch((error) => console.error('Error fetching users:', error));
}, [searchTerm]);
const handleSearch = (event) => {
setSearchTerm(event.target.value);
};
return (
<div>
<h1>User List</h1>
<input
type="text"
placeholder="Search users..."
value={searchTerm}
onChange={handleSearch}
/>
<ul>
{users.map((user) => (
<li key={user.id}>
<p>{user.name}</p>
<p>Age: {user.age}</p>
<p>About: {user.about}</p>
</li>
))}
</ul>
</div>
);
};
export default UserList;
The output will be like this.
Here is the full code → https://codesandbox.io/s/user-table-react-js-3uzipf