Fix demo mutated props and bad link; add component that updates own props.

Author: marnusw

demo/components/ChangeChildProps.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import ReactCSSTransitionReplace from '../../src/ReactCSSTransitionReplace.jsx'
+
+
+class ChangeChildProps extends React.Component {
+
+  state = {
+    text: 'one',
+    key: 1,
+  }
+
+  handleToggleText = () => {
+    this.setState(state => ({
+      text: this.getToggledText(state),
+    }))
+  }
+
+  handleAnimate = () => {
+    this.setState(state => ({
+      text: this.getToggledText(state),
+      key: state.key + 1,
+    }))
+  }
+
+  getToggledText(state) {
+    return state.text === 'one' ? 'two' : 'one'
+  }
+
+  render() {
+    return (
+      <div style={{cursor: 'pointer'}}>
+        <a onClick={this.handleAnimate}>Click to animate</a>
+        {' | '}
+        <a onClick={this.handleToggleText}>Change child props</a><br/>
+        <br/>
+        <ReactCSSTransitionReplace {...this.props}>
+          <p key={this.state.key}>
+            {this.state.text}
+          </p>
+        </ReactCSSTransitionReplace>
+      </div>
+    )
+  }
+}
+
+export default ChangeChildProps

demo/components/ContentAddRemove.jsx

@@ -13,10 +13,13 @@ class ContentAddRemove extends React.Component {
   render() {
     const {style = {}} = this.props
 
-    style.cursor = 'pointer'
+    const newStyle = {
+      ...style,
+      cursor: 'pointer',
+    }
 
     return (
-      <div style={style} onClick={this.handleClick}>
+      <div style={newStyle} onClick={this.handleClick}>
         <a>Click to {this.state.added ? 'remove' : 'add'} content</a><br/>
         <br/>
         <ReactCSSTransitionReplace {...this.props}>

demo/components/ContentSwapper.jsx

@@ -15,10 +15,13 @@ class ContentSwapper extends React.Component {
     const content = React.Children.toArray(this.props.children)
     const {style = {}} = this.props
 
-    style.cursor = 'pointer'
+    const newStyle = {
+      ...style,
+      cursor: 'pointer',
+    }
 
     return (
-      <ReactCSSTransitionReplace {...this.props} style={style} onClick={this.handleClick}>
+      <ReactCSSTransitionReplace {...this.props} style={newStyle} onClick={this.handleClick}>
         {content[this.state.index]}
       </ReactCSSTransitionReplace>
     )

demo/components/Demo.jsx

@@ -114,7 +114,7 @@ class Demo extends React.Component {
 
             <h3 id="react-router-v4">React Router v4</h3>
             <p>Animating React-Router v4 transitions is supported. See the <a
-              href="https://github.com/marnusw/react-css-transition-replace#cross-fading-two-components"
+              href="https://github.com/marnusw/react-css-transition-replace#react-router-v4"
               target="_blank">example</a> for details.</p>
 
             <AnimatedRouter/>