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.

React Code

Here is the full code → https://codesandbox.io/s/user-table-react-js-3uzipf