Pass searched book informations to another component using SolidJS

Question

I'm developing a web app where you search for a book and some informations of this book such as genre, availability, description and authors will be displayed in another screen.

Everything is working so far, when i search for a book all of its informations are displayed in the console, but i just can't display these informations in another page. I used Solid Router and tried in many different ways to do this, but it just wouldn't work (I also tried to use props to do this but it didn't work again).

Here's the component where you search for the book (only displays in console)

SearchBooks.jsx

import axios from "axios";
import { createSignal } from "solid-js";
import Books from './Books'
function SearchBooks() {
  const [searchText, setSearchText] = createSignal("");
  const [book, setBook] = createSignal([]);
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.get(
        `https://www.googleapis.com/books/v1/volumes?q=${searchText()}`
      );
      if (response) {
        const books = response.data.items;
        console.log(books);
        setBook(response.data);
      }
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className="w-full mt-10 bg-gray-100 flex justify-center items-center">
      <div className="container mx-auto dark:bg-gray-900 rounded-lg p-14">
        <form onSubmit={handleSubmit}>
          <h1 className="text-center font-bold text-white text-4xl">
            Find your perfect books{" "}
          </h1>{" "}
          <br />
          <div className="sm:flex items-center bg-white rounded-lg overflow-hidden px-2 py-1 justify-between">
            <input
              className="text-base text-gray-400 flex-grow outline-none px-2"
              type="text"
              placeholder="Search for books"
              value={searchText()}
              onInput={(e) => setSearchText(e.target.value)}
            />
            <div className="ms:flex items-center px-2 rounded-lg space-x-4 mx-auto ">
              <button className="dark:bg-gray-900 text-white text-base rounded-lg px-4 py-2 font-thin">
                Search
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}

export default SearchBooks;

So, how can i make these informations to be displayed in another page/component?

snnsnn · Answer 1 · 2023-04-28T22:38:29.330

That is because data is discarded when you switch page. Changing path mounts the selected path's component, unmounting the previous one's, the one you fetch data inside. There may be many solution but simplest one is using a resource to fetch data outside the path's component and passing it wherever you like.

Another solution would be using Context api, fetching value and pushing it onto context and consuming it in another page but again context provider should live outside path's component so that data is not discarded.

Ahother alternative would be keeping the book signal in a scope above the routes and pass the getters and setters around.

Pass searched book informations to another component using SolidJS

1 Answers1

Linked