score:1
score:0
so, there are a few things i noticed in your js fiddle.
first, you need to reference react.addons.csstransitiongroup, not react.addons.transitiongroup. wrapping your divs in the aliased transitiongroup you have doesn't provide any functionality, and is likely causing some confusion in the reconciliation process in react.
second, you need to specify the transitionname for the csstransitiongroup, and provide specifically named css to go along with it. if you look at my example, i copied the same css that they provide in the react documentation. if you want, you can specify transitionleave or transitionenter as false, if you only want animations when items enter or leave.
last, the rest of your code is fine, but i would recommend that you render your divs based on some logic versus having them as static collections, but it also depends on what you're trying to accomplish. i hacked together a working example. not the prettiest code, but it should work for what you're after.
also, keys are immensely important. using array indices isn't the most stable thing to do, but again it depends on the situation. the keys only need to be unique among sibling elements, so in this case, it's likely ok. just know that if you see strange behavior in rendering, and you have an array of elements being rendered, the first place to look is at your keys.
var reactcsstransitiongroup = react.addons.csstransitiongroup;
var app = react.createclass({
getinitialstate() {
return {
expanded: true,
divs: [1,2,3,4]
}
},
render: function() {
var divs = [];
if(this.state.expanded) {
this.state.divs.map(function(div, index){
divs.push(<div key={index}>{div}</div>);
});
} else {
divs.push(<div key={0}>{this.state.divs[0]}</div>);
}
return (
<div>
<button type="button" onclick={this.toggleexpanded}>
{this.state.expanded ? 'collapse' : 'expand'}
</button>
<reactcsstransitiongroup transitionname="example">
{divs}
</reactcsstransitiongroup>
</div>
)
},
toggleexpanded: function() {
this.setstate({
expanded: !this.state.expanded
});
}
});
react.render(<app />, document.getelementbyid('container'));
Source: stackoverflow.com
Related Query
- TransitionGroup does not remove element from DOM
- Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. (it does remove the elements from the dom but only once)
- React wrapper: React does not recognize the `staticContext` prop on a DOM element
- How to solve Warning: React does not recognize the X prop on a DOM element
- Material-UI React does not recognize the `underlineStyle` prop on a DOM element
- Warning: React does not recognize the X prop on a DOM element
- How to solve Warning: React does not recognize the `currentSlide`, ` slideCount` prop on a DOM element
- React does not recognize the `toggleNode` prop on a DOM element
- Aria-hidden does not hide the element from queries
- Input-Component: React does not recognize the prop on a DOM Element
- React VX Chart: React does not recognize the `xScale` prop on a DOM element
- React does not recognize the `isActive` prop on a DOM element - styled-components
- Warning: React does not recognize the `viewState` prop on a DOM element
- React does not recognize the `initialValue` prop on a DOM element
- React does not recognize the X prop on a DOM element
- Warning: React does not recognize the `warnKey` prop on a DOM element
- React does not recognize the `justifyContent` prop on a DOM element
- React router dom passing data from parent component to child router component does not pass the props.match
- React does not recognize the `activeKey` prop on a DOM element
- React does not recognize the `InputProps` prop on a DOM element
- How to remove HTML element from DOM with React
- setState() does not change state when called from element that depends on state to render
- Remove dynamic rendered element from dom in ReactJS
- React does not recognize the `hasShow` prop on a DOM element
- React does not recognize the `backgroundColor` prop on a DOM element
- Bug: React does not recognize the allowTransparency prop on a DOM element
- Warning: React does not recognize the `pId` prop on a DOM element
- Disappearing DOM element does not register click event
- React does not recognize the `anyTouched` prop on a DOM element
- getting error React does not recognize the `handleChange` prop on a DOM element
More Query from same tag
- × TypeError: Object(...) is not a function. Mern stack post request with fetch not working
- Is it faster to use React.memo if the areEqualFunction performs complex/a large number of comparisons?
- Ho to simulate 'this.props' inside React Component when using Enzyme for tests?
- react js component gets state as null
- How to make API request from react client to express server running on the Heroku platform
- React Hook useEffect async fetch data not passing to tooltip material ui component
- How to add Redux DevTools Extension to my react-redux store?
- How to conditional render css inline
- Cannot update mogodb object with axios.put in Mern stack app
- Reactjs: Form action method and onSubmit
- Preventing cross site scripting for window.location.href
- How to Solve Error in giving variable to the async function?
- How to dynamically hover over react-list elements when arrow keys are pressed?
- MongoDB get all distinct values
- How do I sort and display a React array by year and month?
- Loop through with dynamic number keys in React JS
- Not able to show fetched data from firebase into reactjs webapp
- MUI Nav Tabs does not work with react-router
- How do I test function inside connected component in react?
- How to pass state props to another component
- Add js lib to react component
- How to change position of drawer in material-ui?
- Why React Render element not fired
- Issues setting date
- Change state in forEach loop
- If user is not logged in, dont try to attempt to get the user react
- How to change material-ui select value?
- Issue with using map on a array within a JSON response
- What takes place where in reactjs build system?
- Why can't I pass state via props to a controlled text component?