How can I position button dynamatically according to page components?

user_17997711 0
Viewed 49

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>
)
typescript reactjs button css javascript
2 Answers

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

user_160032520

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>
      )}
    </>
  );
user_75029140
Related