React animations error # 119

Question

React animations error # 119

Navigation

#1 by (1 votes)

0

I am trying to make use of the ReactCSSTransitionGroup library that they explain in the official React documentation. I'm copying this code to try. But still it does not work. I have this error in the console:

Uncaught Error: Minified React error #119; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=119 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Those "Helpul" warnings can be read here .

My imported js files are just these:

<script src="{% static "js/react.min.js" %}"></script>
<script src="{% static "js/react-dom.min.js" %}"></script>
<script src="{% static "js/react-with-addons.min.js" %}"></script>
<script src="{% static "js/babel.min.js" %}"></script>  <!-- Para compilar el JSX en ambientes non Node, compila el codigo de abajo-->
<script src="{% static "js/pruebaAnimacion.js" %}" type="text/babel"></script>

I do not understand what the problem is. In fiddle it works perfectly.

javascript reactjs babeljs

asked by Genarito 25.11.2016 в 19:38

source

1 answer

MariaDB does not recognize a field name in a table when using load data infile I can not get Mustache to work

score 1 · Accepted Answer

In the full description of the error it says:

... You might be adding to a component that was not created inside a component's render method, or you have multiple copies of React

Viewing your code and the scripts you load, you see that you are loading two copies of React (eg: react.min.js and react-with-addons.min.js )

Here below I leave you an example functional copy in codepen

<style>
  .example-enter {
    font-size: 12px;
    transition: font-size 1s ease-out;
  }

  .example-enter.example-enter-active {
    font-size: 1em;
  }

  .example-leave {
    opacity: 1;
    transition: opacity .5s ease-in;
  }

  .example-leave.example-leave-active {
    opacity: 0.01;
  }

  .example-appear {
    opacity: 0.01;
    transition: opacity 5s ease-in;
  }

  .example-appear.example-appear-active {
    opacity: 1;
  }
</style>

<div id="foo"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>
<script src="//fb.me/react-with-addons-0.14.7.js"></script>
<script src="//fb.me/react-dom-0.14.7.js"></script>
<script type="text/babel">
  var Foo = React.createClass({
    getInitialState: function() {
      return {items: ['Start from here']}
    },
    saveAndContinue: function(e) {
      e.preventDefault();
      this.setState({items: this.state.items.concat([Date.now()])});
    },
    render: function() {
      return (

        <React.addons.CSSTransitionGroup
          transitionName="example" 
          transitionAppear={true}
          className='button-row'
          component='ul'
          >
          {this.state.items.map(function(item) {
              return <li><a key={item} href="#" className="button" onClick={this.saveAndContinue}>{item}</a></li>
          }, this)}
        </React.addons.CSSTransitionGroup>

      )
    }
  });

  ReactDOM.render(<Foo />, document.getElementById('foo')); 
</script>