CODEWITHSUNDEEP
reactjs
Andrew Zaw
Andrew Zaw

Reputation: 814

Adding a transition when re-rendering in React

I am trying to add visual transitions to my components in React, and was wondering how I could accomplish that. At the moment, my page is intended to display artists, and renders them by checking the state.

For example if this.state.artists is ["Drake", "Migos", "Taylor Swift"], the render method loops through this and renders a card for Drake, Migos and Taylor Swift. If this state is updated, say if Taylor Swift is removed, the page is re-rendered, rendering a card for Drake and Migos only, thus removing Taylor Swift.

My question is, how can I add a transition for this removal of the Taylor Swift card? I was looking at possible options at transitions, and started wondering if I might have a fundamental problem in the fact that I am not necessarily removing the card outright, it is just re-rendering without that card.

I can provide code if helpful, but this is less of a code question and more of a conceptual question.

Upvotes: 1

Views: 185

Answers (1)

Danziger
Danziger

Reputation: 21181

As you said, one way to do that is just to "mark" what has been deleted and apply a transition to hide it.

In a real use case, you would be sending a request to the backend to actually delete that entity, but in the frontend, no matter if you use Context or something like Redux or Unstated to store your application state, you can just keep the old entity marked as deleted. The next time the user reloads the whole page, they will fetch a fresh version of the data, with the deleted entities gone, so the design should still match what they were seeing before.

In this simple example, I use a separated array, deletedNumbers, to keep track of what has been deleted, but you could use a deleted prop on whatever entity you are looping through:

const data = [1, 2, 3, 4, 5, 6, 7, 8];

const App = () => {
  const [deletedNumbers, setDeletedNumbers] = React.useState([]);
  
  const handleElementClicked = React.useCallback((e) => {
    const number = parseInt(e.target.innerText);
    
    setDeletedNumbers(prevValue => [...prevValue, number]);
  }, []);
  
  const handleResetClicked = React.useCallback((e) => {    
    setDeletedNumbers([]);
  }, []);

  const items = data.map(number => {
    const isDeleted = deletedNumbers.includes(number);

    return (
     <button
       key={ number }
       className={ isDeleted ? 'deleted' : '' }
       onClick={ handleElementClicked }
       disabled={ isDeleted }>
       { number }
     </button>
    );
  });

  return (<React.Fragment>
    <div id="numbers">{ items }</div>
    <button id="reset" onClick={ handleResetClicked }>RESET</button>
  </React.Fragment>);
}

ReactDOM.render(<App />, document.querySelector('#app'));
body {
  font-family: monospace;
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

#numbers {
  display: flex;
}

button {
  font-family: monospace;
  font-weight: bold;
  border-radius: 64px;
  height: 32px;
  width: 32px;
  padding: 0;
  margin: 0 8px;
  box-shadow: inset 0 0 0 2px black;
  background: transparent;
  overflow: hidden;
  transition: all ease-in 300ms;
  outline: none;
  border: 0;
  cursor: pointer;
  display: block;
}

button.deleted {
  width: 0;
  height: 0;
  margin: 16px 0;
  cursor: default;
}

#reset {
  margin-top: 16px;
  padding: 0 16px;
  width: auto;
}
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

Upvotes: 1

Related Questions