We Keep Coding

How can I use React Material UI's transition components to animate adding an item to a list?

I have this class.
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
items: []
};
this.add = this.add.bind(this);
this.clear = this.clear.bind(this);
}
add() {
this.setState(prev => {
const n = prev.items.length;
return {
items: [<li key={n}>Hello, World {n}!</li>, ...prev.items]
};
});
}
clear() {
this.setState({ items: [] });
}
render() {
return (
<div>
<div>
<button onClick={this.add}>Add</button>
<button onClick={this.clear}>Clear</button>
</div>
{/* This is wrong, not sure what to do though... */}
<Collapse in={this.state.items.length > 0}>
<ul>{this.state.items}</ul>
</Collapse>
</div>
);
}
}
Sandbox link: https://codesandbox.io/s/material-demo-ggv04?file=/Demo.js
I'm trying to make it so that every time I click the "add" button, a new item gets animated into existence at the top of the list and the existing items get pushed down. Not sure how to proceed though.
Extra Resources
Example of what I'm trying to achieve: https://codeburst.io/yet-another-to-do-list-app-this-time-with-react-transition-group-7d2d1cdf37fd
React Transition Group Transition docs: http://reactcommunity.org/react-transition-group/transition (which seem to be used internally by Collapse)

I updated your Sandbox code to achieve what you wanted, but I don't think MaterialUI is the best library for that (I could be missing a better way to do it).
The challenge is that when you add a new item, that doesn't exist in the DOM yet. And most of those animation libraries/components require the element to be in the DOM and they just "hide" and "show" it with a transition time.
I had a similar situation and after some research, the better library I found that can handle animation for elements that are not yet in the DOM, was the Framer Motion. (You can check their documentation for mount animations)
Anyway, here is the link for the new Code Sandbox so you can take a look. The changes I made:
Removed random key
In the map function that creates your list using the <Collapse /> component, there was a function to get a random integer and assign that as a key to your component. React needs to have consistent keys to properly do its pretenders, so removing that random number fixes the issue where your "Toggle" button wasn't animating properly. (If your list of items doesn't have an unique ID, just use the index of the map function, which is not a good solution, but still better than random numbers).
<Collapse key={i} timeout={this.state.collapseTimeout} in={this.state.open}>
{it}
</Collapse>
Added a new function to control the toggle
The approach here was: add the item in your list and, after the element is in the DOM, close the <Collapse />, wait a little bit and open it again (so you can visually see the animation). In order to do that, we needed a new "toggle" function that can explicit set the value of the collapse.
toggleValue(value) {
this.setState(() => {
return {
open: value
};
});
}
Added a variable timeout for the collapse
The last issue was that, closing the <Collapse /> when the new item is added, was triggering the animation to close it. The solution here was to dynamically change the timeout of the collapse, so you don't see that.
setCollapseTimeout(value) {
this.setState(() => {
return {
collapseTimeout: value
};
});
}
When adding the element to the list, wait to trigger the animation
Again, to work around the issue with elements not yet in the DOM, we need to use a setTimeout or something to wait to toggle the <Collapse />. That was added in your add() function.
add() {
this.toggleValue(false);
this.setCollapseTimeout(0);
this.setState(prev => {
const n = prev.items.length;
return {
items: [<li key={n}>Hello, World {n}!</li>, ...prev.items]
};
});
setTimeout(() => {
this.setCollapseTimeout(300);
this.toggleValue(true);
}, 100);
}
Again, this is a hacky solution to make <Collapse /> from MaterialUI work with elements that are not yet in the DOM. But, as mentioned, there are other libraries better for that.
Good luck :)

Ended up here earlier on and then came back to create a sandbox showing hopefully a simple method for this scenario. The material-ui docs are a bit (lot) light in this area and I was fighting with a very similar situation, but I tried something with TransitionGroup from react-transition-group, crossed my fingers and it seemed to work.
Forked CodeSandbox with TransitionGroup
The gist is that you
wrap all of the components you want to transition in the <TransitionGroup> component
Inside the TransitionGroup, put in the "condition" (logic or loop output) for the data you want to render
Wrap the individual components you want to transition with transition component of your choice - <Collapse> in this example
e.g. In its most simple setup where "items" is an array of unique numbers coming from either props, state or a redux store
<TransitionGroup>
{items.map(item => (
<Collapse key={item}>
I am item {item}
</Collapse>
))}
</TransitionGroup>
With this setup I have found that I didn't need to put any props on the TransitionGroup or Collapse, and the TransitionGroup handled all the mounting and unmounting in the loop rendering. Material UI doesn't produce the lightest of HTML output, but I guess it's all rendered on the fly so maybe that makes it better (unless you have thousands of elements, then things start to drag).
You can even go a step further and wrap the whole thing in another TransitionGroup to cover situations where you want to remove the whole thing without transitioning all of the individual items - in this instance I switched it to a <Slide>. I was absolutely certain that this wouldn't work, but it seemed to not care. You can also try and be semantic and use the "component" property rather than wrapping in another element e.g.
{items.length > 0 && (
<TransitionGroup>
<Slide>
<TransitionGroup component="ul">
{items.map((item) => (
<Collapse component="li" key={item}>I am item {item}</Collapse>
))}
</TransitionGroup>
</Slide>
</TransitionGroup>
)}
I have changed the sandbox in the following ways
Included TransitionGroup from react-transition-group
Changed the "add" logic so that the components aren't part of the "items" array - the array only contains the data required to render the components
I have added a simple "count" and pushed that to the array to give the items a unique index (had originally used Math.random, but I wanted a "prettier" output). Generally your items will probably be coming from a database somewhere where a unique id will already be set.
Rendered the components in a loop based on the data in the array (this could be done in a separate function, but the gist is that the components aren't being stored in the array)
added a "delete" function to show the removal of single items
wrapped the whole group in a second <TransitionGroup> to show that the unmounting can happen in a group level
Put in some simple styling to get a better idea of the effect. You could use Material UI components here, but just wanted to keep it simple.
Hope this helps someone in the future.

Insert mapped SVGs in React

I'm doing my first bigger React project, and I have already spent a day on this seemingly easy problem. Please excuse mistakes in my terminology.
So I have about a hundred svgs, each put into functions. Since they're so many, I'd rather not touch this file, but if's the only solution, at this point I'm willing to do anything. They're all formatted as such below, except with a lot more svg code, formatted for JSX.
export function Example(props) {
return (
<svg viewBox='0 0 100 100' {...props}>
<g fill='#000000'>
<path d='long path here' />
</g>
</svg>
);
}
These are put in a picker, that in itself took a whole day to figure it. The problem is, I'm trying to map through them to have one icon selected, and for them to render after being the mapping, but I cannot figure out how.
{icons.map((icon, index) => {
return (
<IconMap
key={index}
onClick={() => {
selectIcon(icon);
}}
>
< Example>
</IconMap>
);
})}
So they render if I just write , but not with <{icon /> or just {icon}. How can I get the icon being mapped to render out? I'm also quite sure they're "there" so to speak, because I can hover over where they should be, and about the right amount change background color on hover.
I have tried various means, and something that would work would be if I changed my icons file to instead return the svg data as a variable, and then I'd have a separate icon component that rendered it, so I'd essentially write , but it feels like it should be an easier way, where I don't have to re-write hundreds of icons?
And, it's possible that this is an entirely separate question, but as it is something I've been looking into in relation to solving this problem, I'm including it. I'm using reactstrap for this project, and if it would be possible to make a "picker" in reactstrap, such as a dropdown button or a form where the options would show up in a table rather than a list (a vertical list of 100+ icons is a lot of scrolling), I'd gladly hardcode the entire thing just to have it work in reactstrap with the rest of my code.
Thank you so much, and cheers!

Not sure if I understood your question correctly, are you trying to generate the icons dynamically? If so this is one way you can do it
import Icon1 from 'icons/icon1.svg';
import Icon2 from 'icons/icon2.svg';
const Icon = (props) => {
const getIcon = name => {
return {
icon1: Icon1,
icon2: Icon2,
}
}
const IconComponent = getIcon(props.name);
return (
<IconComponent />
);
}
Then you use it in your component like this
{icons.map((icon, index) => {
return (
<IconMap
key={index}
onClick={() => {
selectIcon(icon);
}}
>
<Icon name={icon.name}>
</IconMap>
);
})}

draft.js: making editor content multipage

I have a difficult problem to solve.
Here is my sample project
Basically I want to create a editable book-like container and since each book page is another container, I can't figure how to make an editor transition from one page to another, once the page is filled with text.
Here is what I'm trying to achieve:
My first thought was to use a shared state for multiple editor instances, but as you can see in the example code, it doesn't work as expected and same text appears in two pages.
How can I achieve a multi-container transition when using draft.js?

The logic in general is to listen to changes of the first editor, count characters / word / lines (or more advanced calculation, if the editor has scroll for example) and finally focus the second editor if needed.
This answer covers, listen, dummy calculation and focus on the next editor.
This answer doesn't cover the calculation itself nor dynamic number of pages nor moving back from second editor when deleting content etc. But I believe that it's a direction to your final goal.
Listen
First of all, I moved the state creation and handling back to the Editor component itself. What "interests" the parent component ("App") is to get notified when its content changed.
But now, App needs to access the ("draft-js") editor in order to call focus. This will solve by creating "ref" in App and propagate it using forwardRef.
const editorRef = React.useRef();
const Editor = React.forwardRef((props, ref) => {
return <MyEditor name="editor-2" forwardRef={ref} />;
});
...
return (
...
<Editor ref={editorRef} />
)
and in Editor.js
function MyEditor({ onChange, forwardRef }) {
...
return (
<Editor
ref={forwardRef}
)
});
Next thing is to add onChange to Editor so App get notified when the content has been changed.
<Editor
ref={forwardRef}
stripPastedStyles
editorState={editorState}
onChange={editorState => {
setEditorState(editorState);
onChange && onChange(editorState); // <---
}}
/>
Handle the change and focus
The first editor is now
<MyEditor name="editor-1" onChange={onEditorChange} />
and onEditorChange is
const onEditorChange = editorState => {
const text = editorState.getCurrentContent().getPlainText();
if (text.length >= 5) {
setTimeout(() => {
editorRef.current.focus();
});
}
};
Currently it checks if the content's length is 5. You probably want to calculate it in a more sophisticated way.
The last question is, why setTimeout? Well, the simple answer is that without it, "draft-js" throw an error. I believe that it's something with their implementation of release / delete / clear global variables or something.
And the most important part, the code and live demo :)
https://codesandbox.io/s/young-shape-t6kcc?file=/src/App.js

ReactJS loosing reference of an element

I am forcing element to be focused like this
/**focusing the element if the element is active */
componentDidUpdate() {
console.log(this.activeElementContainer);
if(this.activeElementContainer!==undefined && this.activeElementContainer!==null) {
/** need to focus the active elemnent for the keyboard bindings */
this.activeElementContainer.focus();
}
}
My render has conditional rendering the elements are being rendered dynamically from the array,
Let say I have one element in div and I am adding another from the toolbox. In that case I need to focus the last element I dragged.
render() {
let childControl= <span tabIndex="-1" dangerouslySetInnerHTML={{__html: htmlToAdd}}></span>;
if(this.props.activeItem){
childControl=<span ref={ (c) => this.activeElementContainer = c }
tabIndex="0" dangerouslySetInnerHTML={{__html: htmlToAdd}}></span>
}
//later I ma using childControl to array and it works fine.
The logs says, first time it works fine
But, second time the this.activeElementContainer is undefined
Is there any alternative way or possible solution to this?
The thing is I need to focus only one element at the time.
Remember: Activecontrol has too many things to do like it can have right click menu, drag etc. so, I need to render it separately.

After reading this one github:
This is intended (discussed elsewhere) but rather unintuitive
behavior. Every time you render:
<Value ref={(e) => { if (e) { console.log("ref", e); }}} /> You are
generating a new function and supplying it as the ref-callback. React
has no way of knowing that it's (for all intents and purposes)
identical to the previous one so React treats the new ref callback as
different from the previous one and initializes it with the current
reference.
PS. Blame JavaScript :P
Source
I changed my code to
<span id={this.props.uniqueId} ref={(c)=>
{if (c) { this.activeElementContainer=c; }}
} tabIndex="0" dangerouslySetInnerHTML={{__html: htmlToAdd}}></span>
Adding if was the real change. now, it has a ref.
For others who face this problem:
I need to write custom function too, in the componentDidUpdate I am still getting old reference,
ref={(c)=>{if (c) { this.activeElementContainer=c; this.ChangeFocus(); }}
Adding this was the perfect solution for me

Why ReactCSSTransitionGroup generates multiple components though I expect only one?

I am using ReactCSSTransitionGroup to do some animation and I found an interesting thing which does not make any sense to me.
In the example below, when I click <div className="HeartControl">, it will update the height of the <div className="HeartFill"> which works fine. (I know to achieve the effect does not necessarily need ReactCSSTransitionGroup here though).
Interesting thing is that when I click, there will be another <div key={this.state.heartHeight} className="HeartFill" style={styleHeartFill}></div> with a new React component id added after the existing one.
But I expect there will always be only ONE <div className="HeartFill"> there.
Why this happened???
P.S.. after a few clicks, the result will look like:
<span data-reactid=".0.4.$8de89f4f1403aee7a963122b06de3712.3.0.0.2">
<div class="HeartFill HeartFill-enter HeartFill-enter-active" style="position:absolute;bottom:0;left:0;width:30px;height:3.5999999999999996px;background-color:#D64541;" data-reactid=".0.4.$8de89f4f1403aee7a963122b06de3712.3.0.0.2.$=1$6:0"></div>
<div class="HeartFill HeartFill-enter HeartFill-enter-active" style="position:absolute;bottom:0;left:0;width:30px;height:3px;background-color:#D64541;" data-reactid=".0.4.$8de89f4f1403aee7a963122b06de3712.3.0.0.2.$=1$5:0"></div>
var HEIGHT_HEART = 30;
var NUM_HEART_MAX = 50;
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Heart = React.createClass({
getInitialState: function() {
return {
heartHeight: 0
};
},
onClick: function(e) {
var currentHeartHeight = this.state.heartHeight;
this.setState({
heartHeight: currentHeartHeight + 1
});
},
render: function() {
var styleHeartFill = {
'position': 'absolute',
'bottom': 0,
'left': 0,
'width': 30,
'height': this.state.heartHeight / NUM_HEART_MAX * HEIGHT_HEART,
'background-color': '#D64541'
};
return (
<div className="Heart" >
<div className="HeartControl" onClick={this.onClick}>
<i className="fa fa-angle-up" />
</div>
<img src="heart.png" className="HeartOutline" />
<ReactCSSTransitionGroup transitionName="HeartFill">
<div key={this.state.heartHeight} className="HeartFill" style={styleHeartFill}></div>
</ReactCSSTransitionGroup>
</div>
);
}
});
React.renderComponent(<Heart />, document.getElementById('Heart'));
`

I suspect the reason your getting more than one is because your using the key prop
<div key={this.state.heartHeight} className="HeartFill" style={styleHeartFill}></div>
From React docs http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
When React reconciles the keyed children, it will ensure that any child with key will be reordered (instead of clobbered) or destroyed (instead of reused).
Heres a jsfiddle using the key prop http://jsfiddle.net/kb3gN/3826/
Heres a jsfiddle not using the key prop http://jsfiddle.net/kb3gN/3827/
P.s I've made a few changes in the fiddle just to try and better demostrate the reasoning

I'm fairly late to the game with this answer, but I ran into this issue as well and want to provide a solution for others. Removing the key is not a sufficient solution since React relies on it to know when to animate items. The documentation now has a section discouraging this.
You must provide the key attribute for all children of
ReactCSSTransitionGroup, even when only rendering a single item. This
is how React will determine which children have entered, left, or
stayed.
- https://facebook.github.io/react/docs/animation.html
If you are only animating the entry/exit of a single item, a CSS hack can be used to fix flickering that may be seen from multiple items entering/exiting.
.HeartFill {
display: none;
}
.HeartFill:first-child {
display: block;
}
React will add new elements on top in most cases, but this isn't guaranteed. If your transitionEndTimeout prop is set to a relatively short time, this shouldn't be a huge concern. The timeout prop should also match the CSS transition time.

Here is the problem:
You are providing a value for key which is changing over time. Keys are used to decide if an element is the same or different.
<div key={this.state.heartHeight} className="HeartFill" style={styleHeartFill}></div>
When you do this the value for key changes and React thinks a new element is entering and an old element is leaving.
Usually you need a unique key which can either be sequential or be generated using Math.random(). (remember to generate them once with getInitialState or DefaultProps, not in render, as that would create a new key every time).
The order of elements is another thing that can be in trouble.
From React's documentation:
In practice browsers will preserve property order except for properties that can be
parsed as a 32-bit unsigned integers. Numeric properties will be ordered sequentially
and before other properties. If this happens React will render components out of
order. This can be avoided by adding a string prefix to the key:

ReactCSSTransitionGroup should create a second element
it will remove it when a specified css animation has finished
or print a warning when there is no animation in the css
maybe look at the Low-level API for better understanding: http://facebook.github.io/react/docs/animation.html (bottom of the page)

I used gluxon's advice as a starting point - what worked for me was removing the leave transition and making it display nothing:
.example-leave.example-leave-active { display: none; }