Message 'React.createClass is deprecated' when creating a component

Navigation
1

I have a Box.jsx component that in turn requires another InputBox.jsx component and all this is rendered in a main.jsx . It turns out that Box.jsx does render but apparently it is not rendering correctly InputBox.jsx . I do not have any errors in the cmd console.

Box.jsx 

var React = require('react');
var inputBox = require('../boxes/inputBox.jsx');

var Box = React.createClass({
    render: function(){
        return(
            <div className="container">
                <inputBox/>
            </div>
        );
    }
});

module.exports = Box;

inputBox.jsx 

var React = require('react');

var inputBox = React.createClass({
    render: function() {
        return(
            <div className="row">probando</div>
        );
    }
});

module.exports = inputBox;

The result in the browser is as follows: 

<div data-reactroot="" class="container">
  <inputbox></inputbox>
</div>

The browser console gives me the following error: 

Warning: inputBox: React.createClass is deprecated and will be removed in
 version 16. Use plain JavaScript classes instead. If you're not yet
 ready to migrate, create-react-class is available on npm as a drop-in
 replacement.
    
asked by Ken Ramirez 30.05.2017 в 14:57
source

2 answers

1

Actually what you see is not an error, but a warning that was added from React 15.5.0 , since React.createClass will be removed in version 16. The options that advise you is to use js classes, for which your code would look like: 

function inputBox(props) {
  return(
    <div className="row">probando</div>
  );
}

or use the create-react-class module (available in npm) as a replacement, which would be: 

var React = require('react');
var createReactClass = require('create-react-class');

var inputBox = createReactClass({
    render: function() {
        return(
            <div className="row">probando</div>
        );
    }
});
    
answered by 31.05.2017 в 17:09
0

What you can do is create components with this syntax: 

import React, { Component} from 'react'

export default class inputBox extends Component {{

  render () {
    return (<div className="row">probando</div>)
  }

}
    
answered by 20.06.2017 в 21:53
Save a series of Dataframes in a single python How to make an AlertDialog run once at the start of an Activity?