Click here to Skip to main content
15,867,704 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I try to create a read more button but right now it is only printed in alert. Has anyone some tips on how to create a read more button thats shows more information from the API like "language" I have created an open library where you can search for books and view information about them.


 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;


What I have tried:

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.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900