import React from 'react'; import { useState, useEffect, createContext } from "react"; const Context = createContext(); const ContextProvider = ({ children }) => { const [books, setBooks] = useState([]); const [query, setQuery] = useState(""); let URL = `https://openlibrary.org/search.json?title=${query}`; useEffect(() => { fetch(URL) .then((res) => res.json()) .then((data) => setBooks(data.docs.slice(0, 30))) .catch((err) => console.error(err)); }, [URL]); const handleSearch = (e) => { e.preventDefault(); let value = e.target.value; setQuery(value); }; return ( <Context.Provider value={{ books, query, handleSearch }}> {children} </Context.Provider> ); }; export { ContextProvider, Context }; BOOK COMPONENT import React from 'react'; function Book({ book }) { const handleClickEvent = () => { alert('test'); }; return ( <table> <tbody> <tr> <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${ book.isbn && '"http://covers.openlibrary.org/b/isbn/' + book.isbn[0] + '-M.jpg' }`, backgroundPosition: 'center', backgroundRepeat: 'no-repeat', }} /> <div className="book"> <th> Title </th> <div className="book-title"> {' '} <th>{book.title}</th> </div> <th> Author </th> <div className="book-authors"> <th>{book.author_name && book.author_name[0]}</th> </div> <th> Publisher year </th> <div className="book-first_publish_year"> <th>{book.first_publish_year}</th> </div> <button onClick={handleClickEvent}>Read more</button> </div> </tr> </tbody> </table> ); } export default Book;
I have tried to find out how to create a read more button where you should retrieve information from an api. But I can not find the answer anywhere and now I try to hear if anyone here has the answer or where i can find it.
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)