How can I position button dynamatically according to page components?-CodePudding

In React application I am displaying list of images. When individual book is removed Hide Books button takes the place to that component.

What I am trying to achieve is Hide Books button should remain at the same position and should dynamatically change its position on y axis if whole row of books is deleted

Initial state of application

When individual book is removed -

app.js

return(
<div style={{ position: "relative", minHeight: "100vh" }}>
          <button
            style={{
              position: "absolute",
              bottom: "",
            }}
            onClick={clearBooks}
          >
            Hide Books
          </button>
        </div>
)

CodePudding user response：

could you share more of your code? maybe have a codesandox example? It seems to be a styling issue but it's hard to tell without more code.

-edit-

your button should be separated from your list of books, this is the reason why it essentially "follows" your last book card.

Try to do something like this

return (
  <section className='wrapper'>
    <div className='bookList'>
      {booksData.map(book => {
         //code your books here
      }
    </div>
    //then put your button out of the div
    <button onClick={function}>hide books</button>
  </section>
)

your CSS for the wrapper div could be something like this

.wrapper{
  display: flex;
  flex-direction: column
}

this way you'll have the books first then the button will be displayed below the list

CodePudding user response：

Place the button as the next sibling to the section of Books. Shown in the following. All I did was to move the button out of the section. You will have to style the button with padding and such for the updated layout.

// in index.js, BookList

  return (
    <>
    <section className="booklist">
      {booksData.map((book, index) => {
        return (
          <Book
            key={index}
            {...book}
            removeIndividualBook={removeIndividualBook}
          ></Book>
        );
      })}
    </section>
      {booksData.length === 0 ? (
        <button onClick={handleShowBook}>Show Books</button>
      ) : (
        <div style={{ position: "relative", minHeight: "100vh" }}>
          <button
            style={{
              // position: "absolute",
              // marginTop: "2350px",
              // marginLeft: "28px",
              position: "absolute",
              //left: "12%",
              bottom: "",
            }}
            onClick={clearBooks}
          >
            Hide Books
          </button>
        </div>
      )}
    </>
  );