Id,PostTypeId,AcceptedAnswerId,OwnerUserId,AnswerCount,CommentCount,FavoriteCount,CommunityOwnedDate,CreationDate,Score,ViewCount,Title,Body,Tags,ErrorClassification 27279488,1,29040342,674474,3,5,0,0,2014-12-03T18:55:41.400,5,3360,"React js Performance tool addon throws ""Cannot read property 'counts' of undefined""","

I've confused as to how to utilize React's performance tool. My current usage is shown below:

_x000D__x000D_ _x000D__x000D_

var Perf = React.addons.Perf;_x000D__x000D_

Perf.start();_x000D__x000D_

this.setState({_x000D__x000D_

    newState: newStateObject,_x000D__x000D_

}, function(){_x000D__x000D_

    Perf.printInclusive();_x000D__x000D_

    Perf.stop();_x000D__x000D_

});_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

This doesn't render anything on the page and blurts out

_x000D__x000D_ _x000D__x000D_

Uncaught TypeError: Cannot read property 'counts' of undefined _x000D__x000D_

_x000D__x000D_ ",,Misconception 29314839,1,29437736,2802074,2,2,3,0,2015-03-28T07:40:56.893,6,3702,Can't launch Chrome DevTools in iOS simulator,"

Using v8.2 simulator, Cmd+D always show the following error message

_x000D__x000D_ _x000D__x000D_

[RCTLog][tid:0x7fcc2bf4cb90][RCTRootView.m:68]>WebSocket debugger is not available. Did you forget to include RCTWebSocketExecutor?_x000D__x000D_

_x000D__x000D_ ",,Misconception 30459180,1,30459458,745952,1,0,0,0,2015-05-26T12:53:35.477,0,33,Is there a way to hook ReactJS onto dynamic elements from backbone?,"

Is there away to make React.render() not get called until backbone view has been rendered. Because that generates the dynamic DOM element that React.render is going to hook on?

_x000D__x000D_ _x000D__x000D_

Is there any ""beautiful"" way to this?

_x000D__x000D_ ",,Algorithmic 31517128,1,31553573,2635088,1,2,0,0,2015-07-20T12:55:37.567,2,746,sublime text 2 html autocompletion in js/jsx files,"

I'd like to be able to autocomplete HTML tags inside js/jsx files within Sublime text 2. I have installed Babel-sublime but HTML autocomplete isn't supported in it.

_x000D__x000D_ _x000D__x000D_

Any other options?

_x000D__x000D_ _x000D__x000D_

EDIT: Any good packages where HTML autocomplete works well within a js file? i.e. Emmet within a js file in Sublime text 2. Doesn't have to be jsx

_x000D__x000D_ ",,Algorithmic 32401278,1,0,2452301,1,1,0,0,2015-09-04T15:07:08.653,0,341,"SVG not displaying color on initial load, only after zoom in or out IE-11","

I have a that is inside a Table. When the initial load is done the color is not displayed. Only after I zoom out or in will the color appear.

_x000D__x000D_ _x000D__x000D_

<table>_x000D__x000D_

  <tbody>_x000D__x000D_

    <tr>_x000D__x000D_

      <td>_x000D__x000D_

_x000D__x000D_

         <rect fill={this.state.props.color} x={this.props.offset} y={this.props.offset}_x000D__x000D_

          width={0} height={this.state.props.height}  />_x000D__x000D_

      </td>_x000D__x000D_

    </tr>_x000D__x000D_

  </tbody>_x000D__x000D_

</table>_x000D__x000D_

_x000D__x000D_

d3.select(React.findDOMNode(this))_x000D__x000D_

  .transition()_x000D__x000D_

  .ease('linear')_x000D__x000D_

  .delay(300)_x000D__x000D_

  .duration(1000)_x000D__x000D_

  .attr(""width"", this.state.props.width);_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

I have the following meta in the html:

_x000D__x000D_ _x000D__x000D_

meta http-equiv=""X-UA-Compatible"" content=""IE=edge"" />

_x000D__x000D_ _x000D__x000D_

script src=""https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"" charset=""utf-8"">

_x000D__x000D_ _x000D__x000D_

_x000D__x000D_ ",

I am running into an issue where when requesting data within two adjacent react-router-relay route components using the same root query, the graphql server query in the second route component invalidates the data previously retrieved from the first.

_x000D__x000D_ _x000D__x000D_

As an example:

_x000D__x000D_ _x000D__x000D_

I am using a workaround to attach fields to a 'viewer' root node, in order to query for arrays of data from a root field:

_x000D__x000D_ _x000D__x000D_

My schema.js includes the following definitions for the viewer (User) type and the root:

_x000D__x000D_ _x000D__x000D_

var GraphQLUser = new GraphQLObjectType({_x000D__x000D_

   name: 'User',_x000D__x000D_

   isTypeOf: function(obj) { return obj instanceof User },_x000D__x000D_

   fields: function() {_x000D__x000D_

      return {_x000D__x000D_

         id: GraphQLRelay.globalIdField('User'),_x000D__x000D_

         //Fields to expose to app, e.g. cars_x000D__x000D_

         cars: {_x000D__x000D_

            type: GraphQLRelay.connectionDefinitions({_x000D__x000D_

               name: 'Car', nodeType: carType_x000D__x000D_

            }).connectionType,_x000D__x000D_

            args: GraphQLRelay.connectionArgs,_x000D__x000D_

            resolve: function(user, args) {_x000D__x000D_

               return_x000D__x000D_

                 GraphQLRelay.connectionFromPromisedArray(getCars(), args)_x000D__x000D_

            },_x000D__x000D_

        },_x000D__x000D_

     }_x000D__x000D_

 },_x000D__x000D_

 interfaces: [nodeDefinitions.nodeInterface],_x000D__x000D_

});_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

And the root:

_x000D__x000D_ _x000D__x000D_

var Root = new GraphQLObjectType({_x000D__x000D_

   name: 'Root',_x000D__x000D_

   fields: {_x000D__x000D_

      viewer: {_x000D__x000D_

         type: GraphQLUser,_x000D__x000D_

         resolve: (root, {} ) => getUser()_x000D__x000D_

    },_x000D__x000D_

    node: nodeDefinitions.nodeField_x000D__x000D_

});_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Now, in the main.jsx application entry point, I am defining the following routes:

_x000D__x000D_ _x000D__x000D_

ReactDOM.render(_x000D__x000D_

   <Router createElement={ReactRouterRelay.createElement}>_x000D__x000D_

      <Route path=""/"" component={App} queries={ViewerQueries} />_x000D__x000D_

      <Route path=""/cars"" component={AllCars} queries={ViewerQueries} />_x000D__x000D_

  </Router>,_x000D__x000D_

  document.getElementById('ReactContainer'));_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

with ViewerQueries.js containing:

_x000D__x000D_ _x000D__x000D_

export default {_x000D__x000D_

   viewer: () => Relay.QL`query { viewer }`,_x000D__x000D_

};_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Now, if the App component includes the following graphql fragment:

_x000D__x000D_ _x000D__x000D_

exports.Component = Relay.createContainer(App, {_x000D__x000D_

   initialVariables: {_x000D__x000D_

      limit: 10_x000D__x000D_

   },_x000D__x000D_

   fragments: {_x000D__x000D_

      viewer: () => Relay.QL`_x000D__x000D_

         fragment on User {_x000D__x000D_

         cars (first: $limit) {_x000D__x000D_

            edges {_x000D__x000D_

              node {_x000D__x000D_

                 name,_x000D__x000D_

              }_x000D__x000D_

            }_x000D__x000D_

          }_x000D__x000D_

       }`,_x000D__x000D_

   },_x000D__x000D_

 })_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

And the AllCars component includes the following:

_x000D__x000D_ _x000D__x000D_

exports.Component = Relay.createContainer(AllCars, {_x000D__x000D_

   initialVariables: {limit: 10},_x000D__x000D_

   fragments: {_x000D__x000D_

      viewer: () => Relay.QL`_x000D__x000D_

         fragment on User {_x000D__x000D_

            cars (first: $limit) {_x000D__x000D_

               edges {_x000D__x000D_

                  node {_x000D__x000D_

                     name,_x000D__x000D_

                     type_x000D__x000D_

                  }_x000D__x000D_

               }_x000D__x000D_

            }_x000D__x000D_

        }`,_x000D__x000D_

     },_x000D__x000D_

  })_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

what happens is that on rendering of the App component on path '/', the array of cars is returned without problems. However, once the '/cars' path is rendered, the resulting array on `this.props.viewer.cars' is empty. In addition, returning to the path '/' to cause a re-rendering of the App component now also returns an empty array.

_x000D__x000D_ _x000D__x000D_

On the back-end, it appears the AllCars component causes an additional POST /graphql 200 277.369 ms - 94 trip to the server to fetch the new type specified in the fragment. _x000D__x000D_ If the AllCars component only includes the 'name' field, Relay correctly doesn't make another server request, but instead populates the array with data (supposedly cached from the initial App component server request).

_x000D__x000D_ _x000D__x000D_

Shouldn't it be possible to get the array of cars from either component, with Relay getting any additional data fields specified in the fragments regardless of the order they appear in the routes?

_x000D__x000D_ _x000D__x000D_

Any help would be greatly appreciated!

_x000D__x000D_ ",

,Misinterpretation 33631406,1,0,4716347,0,8,0,0,2015-11-10T13:42:11.770,0,151,Render Child Component based on route param,"

I have a react router implemented as such:

_x000D__x000D_ _x000D__x000D_

ReactDOM.render((_x000D__x000D_

  <Router history={createBrowserHistory()}>_x000D__x000D_

    <Route path=""/"" component={App}>_x000D__x000D_

      <IndexRoute component={IndexPage} />_x000D__x000D_

      <Route name=""listView"" path=""things"" component={ThingsList}>_x000D__x000D_

        <Route name=""expandedView"" path="":_id"" component={ThingExpanded} />_x000D__x000D_

      </Route>_x000D__x000D_

    </Route>_x000D__x000D_

  </Router>_x000D__x000D_

), document.getElementById(""body""));_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

I'm rendering the list, and registering the route with no problem. with below component.

_x000D__x000D_ _x000D__x000D_

let ThingsList = React.createClass({_x000D__x000D_

render() {_x000D__x000D_

  return (_x000D__x000D_

    <div>_x000D__x000D_

      <ul>_x000D__x000D_

        {things.map((thing) => {_x000D__x000D_

          return (_x000D__x000D_

            <li key={things._id}>_x000D__x000D_

              <Link to={`/things/${thing._id}`}>_x000D__x000D_

                <span>{thing.firstName}</span>_x000D__x000D_

              </Link>_x000D__x000D_

            </li>_x000D__x000D_

          )_x000D__x000D_

        }_x000D__x000D_

      </ul>_x000D__x000D_

    </div>_x000D__x000D_

  )_x000D__x000D_

}_x000D__x000D_

})_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

But how can I show additional data, when one clicks the link and registers the route for expanded view of a particular item? I need to read the router info, and accordingly render the additional info. I mean it should not be based on onClick, based on the route. Something like this?:

_x000D__x000D_ _x000D__x000D_

componentDidMount () {_x000D__x000D_

  let rName = Router.getName;_x000D__x000D_

_x000D__x000D_

  if (rName == ""expandedView"") {_x000D__x000D_

     let rSlug = Router.name(""expandedView"").slug(""_id"");_x000D__x000D_

     this.setState({expand: true, which: rSlug});_x000D__x000D_

  }_x000D__x000D_

}_x000D__x000D_

_x000D__x000D_

render() {_x000D__x000D_

  let extra;_x000D__x000D_

  if (this.state.expand) {_x000D__x000D_

    extra = <ThingExpanded />_x000D__x000D_

  }_x000D__x000D_

}_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

and then in the List component:

_x000D__x000D_ _x000D__x000D_

render() {_x000D__x000D_

  return (_x000D__x000D_

    ..._x000D__x000D_

    <Link to={`/things/${thing._id}`}>_x000D__x000D_

      <span>{thing.name}</span>_x000D__x000D_

      {extra}_x000D__x000D_

    </Link>_x000D__x000D_

  ...)_x000D__x000D_

}_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Note: This answer is very close to what I need, but didn't work. :/_x000D__x000D_ Conditional handler based on slug in React Router?

_x000D__x000D_ ",

,Algorithmic 34139122,1,34139919,1373111,1,3,0,0,2015-12-07T17:04:18.243,0,2192,How to handle img onChange event inside a React.js component,"

I have next and previous buttons and I want to traverse some images. When the user chooses next or previous I want the parent component to know about it._x000D__x000D_ My problem is that I can't seem to catch the onChange event from the child component img element. The image changes by updating the img src attribute.

_x000D__x000D_ _x000D__x000D_

It might be worth noting that if I do <img onchange=alert('heelo') /> the alert fires correctly.

_x000D__x000D_ _x000D__x000D_

I have the following 2 components:

_x000D__x000D_ _x000D__x000D_

Child component:

_x000D__x000D_ _x000D__x000D_

var ImageViewer = React.createClass({_x000D__x000D_

    getInitialState: function () {_x000D__x000D_

        return {_x000D__x000D_

            pages: [],_x000D__x000D_

            currentPage: 0,_x000D__x000D_

            imagePath: """"            _x000D__x000D_

        };_x000D__x000D_

    },_x000D__x000D_

    handleImageLoad: function (event) {_x000D__x000D_

        console.log(""Image load event fired -->"", event.target.tagName);        _x000D__x000D_

        //this.setState({                _x000D__x000D_

        //    currentPage: this.props.document.currentPage_x000D__x000D_

        //}, function () {_x000D__x000D_

        //    console.log(""Current Page state is set"");_x000D__x000D_

        //    console.log(this.state.currentPage);                    _x000D__x000D_

        //});_x000D__x000D_

_x000D__x000D_

    },   _x000D__x000D_

    errorLoadingImage: function (event) {_x000D__x000D_

        console.log(""Image load error event -->"", event.target.tagName);_x000D__x000D_

        console.log(""pathname : "" + window.location.pathname);_x000D__x000D_

        var loginPath = window.location.pathname.split('/');        _x000D__x000D_

        if (loginPath.length > 1) {_x000D__x000D_

            //   window.location.replace(""/"" + loginPath[1]);_x000D__x000D_

            window.location.replace(window.location.pathname);_x000D__x000D_

        } else {_x000D__x000D_

            console.log(""Error: Can not redirect user to login path"");_x000D__x000D_

            console.log(""window.location : "" + window.location);_x000D__x000D_

            console.log(""window.location.pathname : "" + window.location.pathname);_x000D__x000D_

        }_x000D__x000D_

    },_x000D__x000D_

    getImageSrc: function () {_x000D__x000D_

        var imagePath = this.props.document.ImageRoute,_x000D__x000D_

            imageDirectory = imagePath.substring(0, imagePath.lastIndexOf('/') + 1);_x000D__x000D_

        console.log(""Image source from page : "" +this.state.currentPage);_x000D__x000D_

        //current page state gets update in prev and next events._x000D__x000D_

        var fileName = this.props.document.Pages[this.state.currentPage].FileName;_x000D__x000D_

        console.log(fileName);_x000D__x000D_

        console.log(""loading file : "" + imageDirectory + fileName);_x000D__x000D_

        return (imageDirectory + fileName);_x000D__x000D_

    },_x000D__x000D_

    handleChange: function (event) {_x000D__x000D_

        this.props.callback(event.target.value);_x000D__x000D_

    },_x000D__x000D_

    renderImage: function () {  _x000D__x000D_

        if (this.props.document == null) {_x000D__x000D_

            return <img src='' />;_x000D__x000D_

        } else {            _x000D__x000D_

            return <img className=""imageDisplay"" src={this.getImageSrc()} onChange={this.handleChange.bind(this)} onLoad={this.handleImageLoad} onError={this.errorLoadingImage}/>;_x000D__x000D_

        }_x000D__x000D_

    },_x000D__x000D_

    render: function () {_x000D__x000D_

        console.log(""rendering image viewer"")_x000D__x000D_

        console.log(""document is "" + this.props.document)_x000D__x000D_

        return (_x000D__x000D_

            <div onClick={this.clickHandler}>              _x000D__x000D_

                {this.renderPager()}     _x000D__x000D_

                {this.renderImage()}                                                     _x000D__x000D_

            </div>_x000D__x000D_

        );_x000D__x000D_

    }_x000D__x000D_

});_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Parent component:

_x000D__x000D_ _x000D__x000D_

var Workstation = React.createClass({_x000D__x000D_

    getInitialState: function () {_x000D__x000D_

        return {_x000D__x000D_

            documentsInQueue: this.props.documentList,_x000D__x000D_

            ImageSrc: this.props.imgSrc,_x000D__x000D_

            currentDocument: null,_x000D__x000D_

            currentPage : 0_x000D__x000D_

        };_x000D__x000D_

    },_x000D__x000D_

    selectedDocument: function (document, clickedDocumentIndex) {_x000D__x000D_

        console.log(""selected document is :"");_x000D__x000D_

        console.log(document);_x000D__x000D_

        console.log(""clicked document index is :"");_x000D__x000D_

        console.log(clickedDocumentIndex);_x000D__x000D_

        this.setState({ currentDocument: document }, function () {_x000D__x000D_

            console.log(""Image Route state is set"")_x000D__x000D_

            console.log(this.state.currentDocument.ImageRoute)_x000D__x000D_

        });_x000D__x000D_

    },_x000D__x000D_

    onImageViewerPageChange: function (event) {_x000D__x000D_

        console.log(""current page from event : "" + currentPage);_x000D__x000D_

        this.setState({ currentPage: currentPage }, function () {_x000D__x000D_

            console.log(""Workstation: Current Page state is set"")_x000D__x000D_

            console.log(this.state.currentPage)_x000D__x000D_

        });_x000D__x000D_

    },_x000D__x000D_

    render: function () {_x000D__x000D_

        return (_x000D__x000D_

            <div className=""container-fluid"">_x000D__x000D_

                <div className=""row"">_x000D__x000D_

                    <div className=""document col-md-2 border-outline"">_x000D__x000D_

                        <DocumentQueue initialData={this.state.documentsInQueue} imgSrc={this.state.ImageSrc} selectedDocument={this.selectedDocument} currentPage={this.state.currentPage}/>_x000D__x000D_

                    </div>_x000D__x000D_

                    <div className=""col-md-2 border-outline"">                        _x000D__x000D_

                        <Indexing document={this.state.currentDocument} />                                                          _x000D__x000D_

                    </div>_x000D__x000D_

                    <div className=""col-md-8 border-outline imageViewer"">_x000D__x000D_

                        <ImageViewer document={this.state.currentDocument} callback={this.onImageViewerPageChange}/>                        _x000D__x000D_

                    </div>_x000D__x000D_

                </div>_x000D__x000D_

            </div>_x000D__x000D_

        );_x000D__x000D_

    }_x000D__x000D_

});_x000D__x000D_

_x000D__x000D_ ",

,Algorithmic 34582831,1,35233409,1709587,3,0,2,0,2016-01-03T23:30:16.897,16,10557,"Get CSS property values from a component's ""style"" prop","

I'm writing a React Native component for a library and I want users to be able to style it using the style property, just like React.View and other built-in components.

_x000D__x000D_ _x000D__x000D_

However, since my component is actually made up of a few nested views, I need to do some calculations to figure out what styling to put on the inner ones. For example, I might need to adjust the sizing of an image based upon the thickness of a border around it, or adjust a highlight color based upon the given text color, or in some other way infer some piece of styling from another piece of styling.

_x000D__x000D_ _x000D__x000D_

To do this, I need to be able to extract the actual CSS properties (like borderWidth: 2 or backgroundColor: 'pink') out of whatever gets passed as the style prop. This is fine as long as it comes as a plain object, but it may also be the result of a call to React.StyleSheet.create. This seems to be an opaque object with all selectors simply mapped to numeric IDs.

_x000D__x000D_ _x000D__x000D_

How can I resolve these and get the actual CSS properties, in order to do anything more complicated with them than simply passing them straight on to a View?

_x000D__x000D_ ",,Algorithmic 34997636,1,0,463910,0,0,0,0,2016-01-25T16:37:47.503,1,67,Wrong width for float in Firefox,"

I got the following component:

_x000D__x000D_ _x000D__x000D_

var Tile = React.createClass({_x000D__x000D_

  render: function() {_x000D__x000D_

    return (_x000D__x000D_

      <div>_x000D__x000D_

        { this.renderToolbar() }_x000D__x000D_

        { this.renderBody() }_x000D__x000D_

      </div>_x000D__x000D_

    );_x000D__x000D_

  },_x000D__x000D_

_x000D__x000D_

  renderToolbar: function() {_x000D__x000D_

    return (_x000D__x000D_

      <div className=""toolbar"">_x000D__x000D_

        { this.props.toolbar }_x000D__x000D_

      </div>_x000D__x000D_

    );_x000D__x000D_

  },_x000D__x000D_

_x000D__x000D_

  renderBody: function() {_x000D__x000D_

    return (_x000D__x000D_

      <div className=""body"">_x000D__x000D_

        { this.renderHeader() }_x000D__x000D_

        { this.renderContent() }_x000D__x000D_

      </div>_x000D__x000D_

    );_x000D__x000D_

  },_x000D__x000D_

_x000D__x000D_

  renderHeader: function() {_x000D__x000D_

    return (_x000D__x000D_

      <div className=""header"">_x000D__x000D_

        <button>Bar</button>_x000D__x000D_

      </div>_x000D__x000D_

    );_x000D__x000D_

  },_x000D__x000D_

_x000D__x000D_

  renderContent: function() {_x000D__x000D_

    return (_x000D__x000D_

      <div className=""content"">_x000D__x000D_

        { this.props.children }_x000D__x000D_

      </div>_x000D__x000D_

    );_x000D__x000D_

  }_x000D__x000D_

});_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

JS fiddle here: https://jsfiddle.net/v0h1omx8/1/ that shows the problem. Simply open it in Chrome and Firefox.

_x000D__x000D_ _x000D__x000D_

The component behaves as follows:

_x000D__x000D_ _x000D__x000D_

It can display a header
It can show a toolbar
It shows some content
The width of the content is dynamically adjusted depending on the width of the toolbar

_x000D__x000D_ _x000D__x000D_

So far so good. In chrome everything works fine. However, in Firefox I get into trouble when I nest the component, and also use it to render the toolbar. Then the component used for the toolbar will always be too narrow.

_x000D__x000D_ _x000D__x000D_

Do you guys have any idea how I can get firefox to show the toolbar always in the correct width (meaning just stretch the element as wide as it needs to be?)

_x000D__x000D_ _x000D__x000D_

Any help or hints on how to solve this in a different way are much appreciated.

_x000D__x000D_ ",

,Other 35435074,1,35436028,2989715,6,2,1,0,2016-02-16T14:24:42.350,8,8769,Using debouncer with React event,"

I have an onchange event for a field that needs to be debounced, I'm using underscore for that, however when I use the debouncer the event that is passed to the React handler appears to be out of date.

_x000D__x000D_ _x000D__x000D_

<div className='input-field'>_x000D__x000D_

  <input onChange={_.debounce(this.uriChangeHandler.bind(this), 500)} id='source_uri' type='text' name='source_uri' autofocus required />_x000D__x000D_

  <label htmlFor='source_uri'>Website Link</label>_x000D__x000D_

</div>_x000D__x000D_

_x000D__x000D_

uriChangeHandler(event) {_x000D__x000D_

    event.preventDefault();_x000D__x000D_

    let uriField = $(event.target);_x000D__x000D_

    let uri = uriField.val();_x000D__x000D_

    this.setState({_x000D__x000D_

        itemCreateError: null,_x000D__x000D_

        loading: true_x000D__x000D_

    });_x000D__x000D_

    this.loadUriMetaData(uri, uriField);_x000D__x000D_

}_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

I'm getting this error:

_x000D__x000D_ _x000D__x000D_

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're calling preventDefault on a released/nullified synthetic event. This is a no-op. See https‍://fb‍.me/react-event-pooling for more information.

_x000D__x000D_ _x000D__x000D_

Using the onchange without the debouncer works fine.

_x000D__x000D_ ",

,Misconception 35828486,1,0,2870004,3,0,1,0,2016-03-06T15:07:03.460,9,3650,TextInput flexDirection:row not working in React-Native,"

I am currently using React-Native for an Android Project. I have been trying to make a TextInput field with an icon beside the field. However, for some reasons, I notice that the flexDirection: 'row' is not working if the TextInput is one of its child component. The whole view of the one that I apply the style will automatically disappear. This is a snippet of how my code looks like:

_x000D__x000D_ _x000D__x000D_

<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>_x000D__x000D_

    <View style={{flexDirection: 'row'}}>_x000D__x000D_

        <Image_x000D__x000D_

            style={{height: 30, width: 30}}_x000D__x000D_

            source={require('./images/email-white.png')}_x000D__x000D_

        />_x000D__x000D_

        <TextInput _x000D__x000D_

            style={{height: 40}}_x000D__x000D_

            underlineColorAndroid={'transparent'}_x000D__x000D_

            placeholder={'E-mail'}_x000D__x000D_

            placeholderTextColor={'white'}_x000D__x000D_

            onChangeText={(data) => this.setState({ username: data })} />_x000D__x000D_

    </View>_x000D__x000D_

</View>_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

I also tried to wrap both component inside each individual view, but the problem still persists. Is there anyone who knows how to solve this? or anyone can confirm that this is a bug?

_x000D__x000D_ ",

,Algorithmic 36218114,1,36218474,2926641,1,0,0,0,2016-03-25T10:22:53.537,3,3196,Is there a tool to convert React Elements javascript code to JSX,"

It's not difficult to find a tool to convert JSX to React.createElement, something like this:

_x000D__x000D_ _x000D__x000D_

  <div className=""commentBox"">_x000D__x000D_

    Hello, world! I am a CommentBox._x000D__x000D_

  </div>_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

to this:

_x000D__x000D_ _x000D__x000D_

  React.createElement('div', {className: ""commentBox""},_x000D__x000D_

    ""Hello, world! I am a CommentBox.""_x000D__x000D_

  )_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

I can't find a tool co make a convertation vice-versa. I have a big codebase with React.createElement, and I want to transform it to plain JSX. How can I do it?

_x000D__x000D_ ",,Other 36613514,1,36613561,1914683,1,0,0,0,2016-04-14T03:45:49.033,0,693,Babel compile error on static class properties,"

I'm using Babel with Webpack in a React demo. The compiling failed on static class properties with functions calls as object value. But fine with plain types.

_x000D__x000D_ _x000D__x000D_

ERROR in ./src/components/productSet.jsx_x000D__x000D_

Module build failed: SyntaxError: /Users/jack/demo/src/components/productSet.jsx: Unexpected token (9:35)_x000D__x000D_

   7 |     static propTypes: {_x000D__x000D_

   8 |         test: React.PropTypes.object,_x000D__x000D_

>  9 |         data: React.PropTypes.oneOf(['News', 'Photos']),_x000D__x000D_

     |                                    ^_x000D__x000D_

  10 |     }_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

BTW, I've enable all 0-3 stage features

_x000D__x000D_ _x000D__x000D_

module: {_x000D__x000D_

    loaders: [{_x000D__x000D_

        test: /.jsx?$/,_x000D__x000D_

        loader: 'babel-loader',_x000D__x000D_

        exclude: /node_modules/,_x000D__x000D_

        query: {_x000D__x000D_

            presets: ['es2015', 'react', 'stage-3', 'stage-2', 'stage-1', 'stage-0']_x000D__x000D_

        }_x000D__x000D_

    }]_x000D__x000D_

},_x000D__x000D_

_x000D__x000D_ ",,Misconception 36960675,1,36970073,3050450,2,1,34,0,2016-04-30T21:52:31.953,58,14518,Difference between using a HOC vs. Component Wrapping,"

I just checked out HOC's in React. They are pretty cool. However, doesn't simply wrapping a component achieve the same result?

_x000D__x000D_ _x000D__x000D_

Higher Order Component

_x000D__x000D_ _x000D__x000D_

This simple HOC passes state as properties to the ComposedComponent

_x000D__x000D_ _x000D__x000D_

const HOC = ComposedComponent => class extends React.Component {_x000D__x000D_

_x000D__x000D_

    ... lifecycle, state, etc;..._x000D__x000D_

_x000D__x000D_

    render() {_x000D__x000D_

      return (<ComposedComponent {...this.state} />);_x000D__x000D_

    }      _x000D__x000D_

_x000D__x000D_

}_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Component Wrapping

_x000D__x000D_ _x000D__x000D_

This component passes state as properties to the child component

_x000D__x000D_ _x000D__x000D_

class ParentComponent extends React.Component {_x000D__x000D_

_x000D__x000D_

    ... lifecycle, state, etc;..._x000D__x000D_

_x000D__x000D_

    render() {_x000D__x000D_

      return (_x000D__x000D_

        <div>_x000D__x000D_

          {React.cloneElement(this.props.children, { ...this.state })}  _x000D__x000D_

        </div>_x000D__x000D_

      );_x000D__x000D_

    }      _x000D__x000D_

_x000D__x000D_

}_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Although usage is slightly different between the two, they both seem to be equally as reusable.

_x000D__x000D_ _x000D__x000D_

Where is the real difference between HOC's and composing components via this.props.children? Are there examples where you can only use one or the other? It is a better practice to use HOC's. Are these just choices that you have where you get to pick your preferred flavor?

_x000D__x000D_ ",

,Other 37307521,1,0,1930621,0,15,0,0,2016-05-18T18:30:08.137,0,1214,Cannot access array of JSON objects as props,"

I have a React app that consumes a nested JSON object retrieved by an sync AJAX call. On return of the call, I traverse the JSON and bind each of the packets of data the components need to individual state variables.

_x000D__x000D_ _x000D__x000D_

I then call the components in render - also nested - and pass them the data they and their children need as props.

_x000D__x000D_ _x000D__x000D_

Passing individual values works well via <SubComponent dataToUse={this.props.value} />_x000D__x000D_ However when I pass an array and attempt to .map that array in the component, the browser console gives me the error:

_x000D__x000D_ _x000D__x000D_

_x000D__x000D_
Cannot read property 'map' of undefined
_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

...which obviously seems that the array is not actually there - since it is in render, perhaps it is running map before the AJAX call returns the JSON file?_x000D__x000D_ However, if I stringify the array data when binding it to state and pass that, the whole array of data is there, as a string.

_x000D__x000D_ _x000D__x000D_

If I take that string and parse it back into JSON, I get this:

_x000D__x000D_ _x000D__x000D_

_x000D__x000D_
Unexpected token u in JSON at position 0
_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Which again suggests that the data is NOT there.

_x000D__x000D_ _x000D__x000D_

Suffice it say, I am confused. I can easily pass single data variables down my app hierarchy as props but cannot access arrays.

_x000D__x000D_ _x000D__x000D_

Has anyone else had this sort of problem?

_x000D__x000D_ _x000D__x000D_

Edit; some code:

_x000D__x000D_ _x000D__x000D_

My top most component makes an AJAX call with JQuery:

_x000D__x000D_ _x000D__x000D_

$.ajax({_x000D__x000D_

    type: 'GET',_x000D__x000D_

    url: ""/api/"" + eventCode,_x000D__x000D_

    dataType: 'json',_x000D__x000D_

    cache: false,_x000D__x000D_

    success: function(data) {_x000D__x000D_

        this.setState({updateList: data.updates});_x000D__x000D_

        }.bind(this)_x000D__x000D_

    });_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

This AJAX call sits in its own function and is called every 30 seconds here:

_x000D__x000D_ _x000D__x000D_

componentDidMount: function() {_x000D__x000D_

    this.loadCommentsFromServer();_x000D__x000D_

    var refreshInterval = 32000; // take this from the blob!_x000D__x000D_

    setInterval(this.loadCommentsFromServer, refreshInterval);  _x000D__x000D_

},_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

The render function is as follows:

_x000D__x000D_ _x000D__x000D_

render: function() {_x000D__x000D_

    return (_x000D__x000D_

        <div id='App'>_x000D__x000D_

            <UpdateList updateData={this.state.updateList}/>_x000D__x000D_

        </div>_x000D__x000D_

    )_x000D__x000D_

}_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

The UpdateList component is as follows:

_x000D__x000D_ _x000D__x000D_

var UpdateList = React.createClass({_x000D__x000D_

_x000D__x000D_

    render: function() {_x000D__x000D_

_x000D__x000D_

_x000D__x000D_

        return (_x000D__x000D_

            <div id='UpdateList'>_x000D__x000D_

                Update list:_x000D__x000D_

                <ul>_x000D__x000D_

                {_x000D__x000D_

                    this.props.updateData.map(function(update, i){_x000D__x000D_

                        return <Updates singleUpdate={this.props.updateData[i]}/>_x000D__x000D_

                    })_x000D__x000D_

                }_x000D__x000D_

                </ul>_x000D__x000D_

            </div>_x000D__x000D_

        )_x000D__x000D_

    }_x000D__x000D_

});_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

If add a simple test array in getInitialState, the array is mapped and the Updates component renders each item just as desired.

_x000D__x000D_ ",,Algorithmic 37630317,1,37630555,2128699,1,0,0,0,2016-06-04T12:37:32.240,0,1007,How to invoke a React-router client side redirect to a new url in JS without using ,"

here is a question for you regarding React-Router
_x000D__x000D_ What is the best practice when you want to invoke a client side redirect to a new url?
_x000D__x000D_ <Link> is nice, but I need to invoke a redirect inside a function in a given timing, so I want to invoke it in my JS script code and not in my jsx markup...
_x000D__x000D_ cheers
_x000D__x000D_ Ajar

_x000D__x000D_ ",

,Algorithmic 37936422,1,37962004,1630718,1,0,0,0,2016-06-21T05:43:14.470,0,881,Docker NodeJs for ReactJs,"

I'm trying to create a container for my ReactJs project with nodejs. At first, it seems to be success, but am not able to access it through the port.

_x000D__x000D_ _x000D__x000D_

Following is my Dockerfile

_x000D__x000D_ _x000D__x000D_

package.json

_x000D__x000D_ _x000D__x000D_

Command I ran

_x000D__x000D_ _x000D__x000D_

 docker build -t <your username>/node-reactjs ._x000D__x000D_

_x000D__x000D_

 docker run -p 9090:3333 -d <your username>/node-reactjs_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

As you can see, the container created successfully

_x000D__x000D_ _x000D__x000D_

But

_x000D__x000D_ _x000D__x000D_

I even tried to go inside the container and curl localhost:3333, it did return me the js file

_x000D__x000D_ _x000D__x000D_

I tried googling around, and many ways but seems like cant make it to work. I even tried the docker-compose way, but even worse. Cant even create the container.

_x000D__x000D_ _x000D__x000D_

Would really appreciate if someone can help me out on this.

_x000D__x000D_ _x000D__x000D_

Btw, is this the correct way to do for ReactJs?

_x000D__x000D_ _x000D__x000D_

Thanks.

_x000D__x000D_ ",

,Misconception 38227896,1,0,3989155,3,6,1,0,2016-07-06T15:31:33.740,5,8056,Webpack fails with babel has been moved to babel-core,"

I've followed the solutions on stackoverflow posts posted by different developers. However, none of them helped fix the issue I'm encountering. Few of the things I did are

_x000D__x000D_ _x000D__x000D_

uninstall babel
install babel-core, babel-cli
upgraded to node v6.2.2
reinstall webpack
blew up node_modules and ran npm install again

_x000D__x000D_ _x000D__x000D_

All of the above never fixed this error

_x000D__x000D_ _x000D__x000D_

ERROR in The node API for `babel` has been moved to `babel-core`._x000D__x000D_

 @ (webpack)-dev-server/client?http://localhost:3333 1:10-24_x000D__x000D_

_x000D__x000D_

ERROR in The node API for `babel` has been moved to `babel-core`._x000D__x000D_

 @ (webpack)-dev-server/client?http://localhost:3333 3:16-37_x000D__x000D_

_x000D__x000D_

ERROR in The node API for `babel` has been moved to `babel-core`._x000D__x000D_

 @ (webpack)-dev-server/client?http://localhost:3333 2:13-37_x000D__x000D_

_x000D__x000D_

ERROR in (webpack)/~/process/browser.js_x000D__x000D_

Module build failed: Error: Couldn't find preset ""react"" relative to directory ""/Users/admin/.nvm/versions/node/v6.0.0/lib/node_modules/webpack/node_modules/process""_x000D__x000D_

    at /Users/admin/repos/ReactJSApps/react-es6-setup/node_modules/babel-core/lib/transformation/file/options/option-manager.js:395:17_x000D__x000D_

    at Array.map (native)_x000D__x000D_

._x000D__x000D_

._x000D__x000D_

._x000D__x000D_

webpack: bundle is now VALID._x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Here is my package.json

_x000D__x000D_ _x000D__x000D_

{_x000D__x000D_

  ""name"": ""react-es6-setup"",_x000D__x000D_

  ""version"": ""1.0.0"",_x000D__x000D_

  ""description"": """",_x000D__x000D_

  ""main"": ""index.js"",_x000D__x000D_

  ""scripts"": {_x000D__x000D_

    ""start"": ""webpack-dev-server""_x000D__x000D_

  },_x000D__x000D_

  ""author"": """",_x000D__x000D_

  ""license"": ""ISC"",_x000D__x000D_

  ""dependencies"": {_x000D__x000D_

    ""react"": ""^15.2.0"",_x000D__x000D_

    ""react-dom"": ""^15.2.0""_x000D__x000D_

  },_x000D__x000D_

  ""devDependencies"": {_x000D__x000D_

    ""babel-core"": ""^6.10.4"",_x000D__x000D_

    ""babel-loader"": ""^6.2.4"",_x000D__x000D_

    ""babel-preset-es2015"": ""^6.9.0"",_x000D__x000D_

    ""babel-preset-react"": ""^6.11.1""_x000D__x000D_

  }_x000D__x000D_

}_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

And webpack.config.js

_x000D__x000D_ _x000D__x000D_

module.exports = {_x000D__x000D_

  entry: './main.js',_x000D__x000D_

  output: {_x000D__x000D_

    path: './',_x000D__x000D_

    filename: 'index.js'_x000D__x000D_

  },_x000D__x000D_

  devServer: {_x000D__x000D_

    inline: true,_x000D__x000D_

    port: 3333_x000D__x000D_

  },_x000D__x000D_

  module: {_x000D__x000D_

    loaders: [_x000D__x000D_

        {_x000D__x000D_

          test: /\.js$/,_x000D__x000D_

          exclude: 'node_modules',_x000D__x000D_

          loader: 'babel',_x000D__x000D_

          query: {_x000D__x000D_

            presets: [ 'es2015', 'react' ]_x000D__x000D_

          }_x000D__x000D_

        }_x000D__x000D_

    ]_x000D__x000D_

  }_x000D__x000D_

}_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

and the dir listing of the node_modules

_x000D__x000D_ _x000D__x000D_

$ ls -l node_modules/ |grep react_x000D__x000D_

drwxr-xr-x    6 admim  207825898    204 Jul  6 02:02 babel-helper-builder-react-jsx/_x000D__x000D_

drwxr-xr-x    6 admim  207825898    204 Jul  6 02:02 babel-plugin-transform-react-display-name/_x000D__x000D_

drwxr-xr-x    6 admim  207825898    204 Jul  6 02:02 babel-plugin-transform-react-jsx/_x000D__x000D_

drwxr-xr-x    6 admim  207825898    204 Jul  6 02:02 babel-plugin-transform-react-jsx-self/_x000D__x000D_

drwxr-xr-x    6 admim  207825898    204 Jul  6 02:02 babel-plugin-transform-react-jsx-source/_x000D__x000D_

drwxr-xr-x    6 admim  207825898    204 Jul  6 02:02 babel-preset-react/_x000D__x000D_

drwxr-xr-x    9 admim  207825898    306 Jul  6 02:03 react/_x000D__x000D_

drwxr-xr-x    9 admim  207825898    306 Jul  6 02:03 react-dom/_x000D__x000D_

_x000D__x000D_ ",,Algorithmic 38496512,1,38550336,3533365,1,5,0,0,2016-07-21T06:27:54.533,6,1283,Server-side rendering with React with a randomly generated string?,"

I'm trying server-side rendering for the first time in my React/Redux app. An issue I'm having right now is that I need the initial state to have a randomly generated string and then pass it as a prop to my main App component. This is obviously causing an issue because it's generating different strings for the client and server. Is there something I can do to stop this issue from happening?

_x000D__x000D_ _x000D__x000D_

Basic structure to help with understanding:

_x000D__x000D_ _x000D__x000D_

App.js

_x000D__x000D_ _x000D__x000D_

import React from 'react';_x000D__x000D_

import { connect } from 'react-redux';_x000D__x000D_

_x000D__x000D_

const App = ({ randomStr }) => (_x000D__x000D_

  <div> _x000D__x000D_

    <p>{randomStr}</p>_x000D__x000D_

  </div>_x000D__x000D_

);_x000D__x000D_

_x000D__x000D_

const mapStateToProps = (state) => ({_x000D__x000D_

  ..._x000D__x000D_

});_x000D__x000D_

_x000D__x000D_

const mapDispatchToProp = (dispatch) => ({_x000D__x000D_

  ..._x000D__x000D_

});_x000D__x000D_

_x000D__x000D_

export default connect(_x000D__x000D_

  mapStateToProps,_x000D__x000D_

  mapDispatchToProps_x000D__x000D_

)(App);_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

And my reducer:

_x000D__x000D_ _x000D__x000D_

reducer.js

_x000D__x000D_ _x000D__x000D_

import { generateString } from '../util';_x000D__x000D_

import { NEW_STRING } from '../constants';_x000D__x000D_

_x000D__x000D_

const stringReducer = (state = generateString(), action) => {_x000D__x000D_

  switch (action.type) {_x000D__x000D_

    case NEW_STRING:_x000D__x000D_

      return generateString();_x000D__x000D_

_x000D__x000D_

    default:_x000D__x000D_

      return state;_x000D__x000D_

  }_x000D__x000D_

};_x000D__x000D_

_x000D__x000D_

export default stringReducer;_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

As you can see, I'm getting the randomStr from my redux store and rendering it, but it is different in client and server. Any help would be appreciated!

_x000D__x000D_ ",

,Algorithmic 38757190,1,0,857025,1,0,0,0,2016-08-04T01:43:26.093,0,363,How create react base component that I can extend?,"

I'm trying to extend a component and override one method, but both of the below methods do not work.

_x000D__x000D_ _x000D__x000D_

    var Hello = React.createClass( {_x000D__x000D_

        getName: function() { throw ""This method not implemented"" },_x000D__x000D_

        render: function() {_x000D__x000D_

            return <this.props.component.slug className='text'>_x000D__x000D_

                {this.props.component.value}{this.getName()}_x000D__x000D_

            </this.props.component.slug>;_x000D__x000D_

        }_x000D__x000D_

    });_x000D__x000D_

_x000D__x000D_

    class HelloChild extends Hello {_x000D__x000D_

        constructor(props) {_x000D__x000D_

          super(props);_x000D__x000D_

        }_x000D__x000D_

_x000D__x000D_

        getName()_x000D__x000D_

        {_x000D__x000D_

          return ""Child"";_x000D__x000D_

        }_x000D__x000D_

    };_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Second attempt:

_x000D__x000D_ _x000D__x000D_

    class Hello extends React.Component {_x000D__x000D_

        getName() { throw ""This method not implemented"" }_x000D__x000D_

        render() {_x000D__x000D_

            return <this.props.component.slug className='text'>_x000D__x000D_

                {this.props.component.value}{this.getName()}_x000D__x000D_

            </this.props.component.slug>;_x000D__x000D_

        }_x000D__x000D_

    };_x000D__x000D_

_x000D__x000D_

    class HelloChild extends Hello {_x000D__x000D_

        constructor(props) {_x000D__x000D_

          super(props);_x000D__x000D_

        }_x000D__x000D_

_x000D__x000D_

        getName()_x000D__x000D_

        {_x000D__x000D_

          return ""Child"";_x000D__x000D_

        }_x000D__x000D_

    };_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

When I try to render the HelloChild, it throws the error:

_x000D__x000D_ _x000D__x000D_

Uncaught Invariant Violation: Objects are not valid as a React child_x000D__x000D_

(found: object with keys {}). If you meant to render a collection of _x000D__x000D_

children, use an array instead or wrap the object using _x000D__x000D_

createFragment(object) from the React add-ons. Check the render method_x000D__x000D_

of `bound `._x000D__x000D_

_x000D__x000D_ _x000D__x000D_

How do I extend it and only override one method?

_x000D__x000D_ ",

,Misinterpretation 39002609,1,0,3121196,0,3,1,0,2016-08-17T17:11:27.430,2,73,Embed string containing HTML in React safely,"

I'm using the library linkifyjs, which parses a comment and returns the string with an <a> tag of the text if it contains a link. This is cool, but the only way I know to use this would be dangerouslySetInnerHtml. I'm fleshing out the comment system from the React tutorial, so I feel using my current method would leave it susceptible to injected scripts.

_x000D__x000D_ _x000D__x000D_

Is there anyway I can convert a string to an HTML element and safely embed it?

_x000D__x000D_ _x000D__x000D_

Edit: Forgot to elaborate, I am pulling comments from Facebook which would return a plain string, ""visit stackoverflow.com today"".

_x000D__x000D_ ",,Algorithmic 39240112,1,0,5088733,1,0,0,0,2016-08-31T03:05:55.553,0,410,Listview react-native issue rendering all rows,"

I have a list view in my app which fetches data from api makes an array out of it and creates a datasource for it and then renders all the rows, now the dataset is not all that big and also but the list view fails to render some of the rows even the log for listview renderRow shows that only part of the dataSource is being rendered but if I remove the content container style from the listview on hot reloading it renders all the rows and on reloading it again is back to rendering only partial rows. Also the images are not being displayed in the view.

_x000D__x000D_ ",

,Algorithmic 39501382,1,44975916,1017674,1,3,0,0,2016-09-15T00:06:36.873,7,4502,React native android error: cannot find symbol,"

I was trying to build an open source react native project example:

_x000D__x000D_ _x000D__x000D_

https://github.com/wix/react-native-wordpress-editor/tree/master/example

_x000D__x000D_ _x000D__x000D_

But i ran into this error after running_x000D__x000D_ ./react-native run-android

_x000D__x000D_ _x000D__x000D_

D:\e\example\node_modules\react-native-navigation\android\app\src\main\java\com\reactnativenavigation\NavigationApplica_x000D__x000D_

ion.java:7: Error: cannot find symbol_x000D__x000D_

import com.facebook.react.ReactApplication;_x000D__x000D_

                          ^_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Anyone has any idea of whats going on?

_x000D__x000D_ ",

,Other 39763482,1,0,3844526,0,0,0,0,2016-09-29T06:59:11.053,1,406,ERROR in multi main Cannot GET /dist/bundle.js,"

i am new to react.js. i am getting this error on production but same code is working on development. can anybody help me.when i am running this code on development.everytime webpack built and generate a dist folder this folder have a bundle.js but webpack is not build on production

_x000D__x000D_ _x000D__x000D_

 /home/ubuntu/.pm2/logs/server-out-0.log last 10 lines:_x000D__x000D_

   0|server   | Version: webpack 1.13.2_x000D__x000D_

   0|server   | Time: 566ms_x000D__x000D_

   0|server   |     Asset     Size  Chunks             Chunk Names_x000D__x000D_

   0|server   | bundle.js  1.52 kB       0  [emitted]  main_x000D__x000D_

   0|server   | chunk    {0} bundle.js (main) 28 bytes [rendered]_x000D__x000D_

   0|server   |     [0] multi main 28 bytes {0} [built] [1 error]_x000D__x000D_

   0|server   | _x000D__x000D_

   0|server   | ERROR in multi main_x000D__x000D_

   0|server   | Module not found:_x000D__x000D_

   Error:Cannot resolve 'file' or   'directory'_x000D__x000D_

  ./client/index.html in /var/www/html/AR/server_x000D__x000D_

   0|server   |  @ multi main_x000D__x000D_

_x000D__x000D_

_x000D__x000D_

  [STREAMING] Now streaming realtime logs for [all] processes_x000D__x000D_

  0|server   | Error: Cannot GET /dist/bundle.js_x000D__x000D_

  0|server   |     at raiseUrlNotFoundError       _x000D__x000D_

_x000D__x000D_

 (/var/www/html/AR/node_modules/loopback/server/middleware/url-not-   _x000D__x000D_

_x000D__x000D_

found.js:20:17)_x000D__x000D_

0|server   |     at Layer.handle [as handle_request]   _x000D__x000D_

_x000D__x000D_

(/var/www/html/AR/node_modules/express/lib/router/layer.js:95:5)_x000D__x000D_

 0|server   |     at trim_prefix    _x000D__x000D_

_x000D__x000D_

 (/var/www/html/AR/node_modules/express/lib/router/index.js:312:13)_x000D__x000D_

 0|server   |     at   _x000D__x000D_

 /var/www/html/AR/node_modules/express/lib/router/index.js:280:7_x000D__x000D_

 0|server   |     at Function.process_params    _x000D__x000D_

_x000D__x000D_

 (/var/www/html/AR/node_modules/express/lib/router/index.js:330:12)_x000D__x000D_

 0|server   |     at next    _x000D__x000D_

_x000D__x000D_

 (/var/www/html/AR/node_modules/express/lib/router/index.js:271:10)_x000D__x000D_

 0|server   |     at SendStream.error   _x000D__x000D_

_x000D__x000D_

(/var/www/html/AR/node_modules/express/node_modules/serve-   _x000D__x000D_

_x000D__x000D_

static/index.js:121:7)_x000D__x000D_

0|server   |     at emitOne (events.js:96:13)_x000D__x000D_

0|server   |     at SendStream.emit (events.js:188:7)_x000D__x000D_

0|server   |     at SendStream.error  _x000D__x000D_

_x000D__x000D_

  (/var/www/html/AR/node_modules/express/node_modules/send/index.js:275:17)_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Thanks,

_x000D__x000D_ ",

,Other 40025544,1,0,4401847,1,0,0,0,2016-10-13T15:47:29.740,0,633,React Redux checkbox on top row of table (fixed-data-table) remains checked,"

I'm having a strange issue with Redux on React with a table generated with fixed-data-table, whose rows depend on a computed state variable.

_x000D__x000D_ _x000D__x000D_

There's a checkbox on each of these rows in order to be able to select the data in bulk. When a button is pressed, all checked rows hide and here's when the issue arises: if the top row was checked and the one below wasn't, when the table is rerendered, the top row checkbox remains checked (after the original top row has been hidden).

_x000D__x000D_ _x000D__x000D_

The normal columns showing data are generated dynamically, but the one with the checkbox is generated like this:

_x000D__x000D_ _x000D__x000D_

<Column_x000D__x000D_

 width={75}_x000D__x000D_

 header={<Cell>Check</Cell>}_x000D__x000D_

 columnKey=""selectCol""_x000D__x000D_

 cell={({rowIndex, ...props}) => (_x000D__x000D_

  <Cell>_x000D__x000D_

   <input type=""checkbox"" onChange={(e) => {_x000D__x000D_

     var chk = e.target;_x000D__x000D_

     {/* stuff that doesn't affect whether it's checked or not when rendered */}_x000D__x000D_

    }}_x000D__x000D_

  </Cell>_x000D__x000D_

 )}_x000D__x000D_

/>_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Anyone knows what could be happening? Thank you very much

_x000D__x000D_ ",

,Misinterpretation 40281569,1,40282452,1554773,2,0,7,0,2016-10-27T09:55:21.123,21,18696,Use specific package name when setting up a react-native project,"

When creating a react-native app with react-native init MyApp the Android and iOS package names are automatically set to com.myapp.

_x000D__x000D_ _x000D__x000D_

Changing the Android package name (especially if you need something longer like com.organisation.propject.app) later in the development is pretty fiddly and I was wondering if there was a way to set the package name when setting up a project with react-native init?

_x000D__x000D_ ",,Misconception 40537746,1,0,7143555,1,7,3,0,2016-11-10T22:00:03.677,15,3150,Caret position reverts to start of contenteditable span on re-render in React in Safari and Firefox,"

When typing text into a contenteditable span in Safari or Firefox the caret moves to the start on each keypress. This only seems to happen when React re/renders the component.

_x000D__x000D_ _x000D__x000D_

Chrome works just fine. Haven't tested IE.

_x000D__x000D_ _x000D__x000D_

An example where | is the caret and typing Hello:

_x000D__x000D_ _x000D__x000D_

| |H |eH |leH |lleH |olleH

_x000D__x000D_ _x000D__x000D_

Here's a simplified version of my component:

_x000D__x000D_ _x000D__x000D_

import React, { Component } from 'react';_x000D__x000D_

_x000D__x000D_

class ContentEditable extends Component {_x000D__x000D_

    constructor(props) {_x000D__x000D_

        super(props);_x000D__x000D_

_x000D__x000D_

        this.state = {_x000D__x000D_

            value: props.value_x000D__x000D_

        };_x000D__x000D_

    }_x000D__x000D_

_x000D__x000D_

    createMarkup() {_x000D__x000D_

        return { __html: this.state.value };_x000D__x000D_

    }_x000D__x000D_

_x000D__x000D_

    handleInput(event) {_x000D__x000D_

        this.setState({_x000D__x000D_

            value: event.target.innerText_x000D__x000D_

        });_x000D__x000D_

    }_x000D__x000D_

_x000D__x000D_

    isValid() {_x000D__x000D_

        let bestLength = 3;_x000D__x000D_

_x000D__x000D_

        return this.state.value.length > bestLength;_x000D__x000D_

    }_x000D__x000D_

_x000D__x000D_

    render() {_x000D__x000D_

        let className = '';_x000D__x000D_

        if (this.isValid()) {_x000D__x000D_

            className = 'is-valid';_x000D__x000D_

        }_x000D__x000D_

_x000D__x000D_

        return (_x000D__x000D_

            <span_x000D__x000D_

                contentEditable=""true""_x000D__x000D_

                onInput={ this.handleInput.bind(this) }_x000D__x000D_

                className={ className }_x000D__x000D_

                dangerouslySetInnerHTML={ this.createMarkup() }_x000D__x000D_

            >_x000D__x000D_

            </span>_x000D__x000D_

        );_x000D__x000D_

    }_x000D__x000D_

}_x000D__x000D_

_x000D__x000D_

ContentEditable.propTypes = {_x000D__x000D_

    value: React.PropTypes.string.isRequired_x000D__x000D_

};_x000D__x000D_

_x000D__x000D_

export default ContentEditable;_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

Anyone come across this before?

_x000D__x000D_ ",,Misinterpretation 40784874,1,40785288,486218,3,0,1,0,2016-11-24T11:10:19.220,3,5225,react-sortable-hoc: Handling of click event on list item,"

This question is about https://github.com/clauderic/react-sortable-hoc._x000D__x000D_ I am pretty new to React, so I find the following a bit irritating. Go to_x000D__x000D_ https://jsfiddle.net/7tb7jkz5/. Notice line 4

_x000D__x000D_ _x000D__x000D_

const SortableItem = SortableElement(({value}) => <li className=""SortableItem"" onClick={console.debug(value)}>{value}</li>);_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

When you run the code, the console will log ""Item 0"" to ""Item 99"". A click on an item will log the same, but three times. Why does this happen? And is this really necessary or more like a bug?

_x000D__x000D_ _x000D__x000D_

I expected a behavior similar to an ordinary DOM, so the click event would bubble up from the clicked item and could be caught along the way through its ancestors. The observed behavior looks to me like the click event would be sent down by the list to each list item three times.

_x000D__x000D_ _x000D__x000D_

Update:_x000D__x000D_ Well, this is actually as clear as crystal, thanks for pointing this out, Shubham. I did not just specify a reference, but an actual call to console.debug, which was executed every time the expression was evaluated. Common mistake.

_x000D__x000D_ _x000D__x000D_

Still, this means, each list item is rendered (I guess) three times, when I click one of them. I suspect missing optimization or even useless redrawing.

_x000D__x000D_ ",

,Misconception 41004409,1,41004497,3527748,1,0,0,0,2016-12-06T20:37:19.050,0,50,CSS class only applied after action happens,"

I have a bit of a (very) weird issue going on. I've been trying to handle it for a while now, and decided to look for other thoughts on trying to fix this.

_x000D__x000D_ _x000D__x000D_

So, here's what's happening:

_x000D__x000D_ _x000D__x000D_

I'm developing a React app, using react-router. Every time that a new view is loaded, I use react-addons-transition-group to create a fade animation. And it works fine, overall.

_x000D__x000D_ _x000D__x000D_

The problem is that there's one view that, if coming from a specific view, will not load it's CSS classes. This is extra weird, since I have all the CSS classes in one single minified file.

_x000D__x000D_ _x000D__x000D_

The view in question is a carousel, that holds many views. First time it's opened, it has no style applied. However, if I change the carousel slide, all the styles are applied.

_x000D__x000D_ _x000D__x000D_

The following screen shot will show the state before and after the change of slides:

_x000D__x000D_ _x000D__x000D_

At this point, I'm completely out of ideas of what can be happening. Have anyone ever faced such issue?_x000D__x000D_ I think I should stress it once more: it only happens when transitioning from one specific view to this specific view. It does not happen anywhere else in the app.

_x000D__x000D_ _x000D__x000D_

Thanks in advance for your help!

_x000D__x000D_ ",

,Misconception 41226416,1,41227615,7272998,1,0,0,0,2016-12-19T15:52:56.567,0,768,React router is not able to handle routes and give back warning of did not match,"

I have a sample project just to play with react and get an idea how it works.

_x000D__x000D_ _x000D__x000D_

For development environment I use webpack dev server but this is not enough for actual deployment. Apparently when it comes to actual deployment it seems that there is no good solution and the only thing I could find was using heroku which I cannot have my application under my domain and should end with heroku which is not acceptable in real world development (please correct me if I am wrong since I am not sure what is the best way to deploy my web app).

_x000D__x000D_ _x000D__x000D_

To deploy my app the only way I could think of was using tomcat. So I copied the bundle.js and index.html file of my project and put it in the WebContent of eclipse IDE. The following is the index.js file:

_x000D__x000D_ _x000D__x000D_

import {render} from ""react-dom"";_x000D__x000D_

import React from ""react"";_x000D__x000D_

import {Router, Route, browserHistory, useRouterHistory, IndexRoute} from     ""react-router"";_x000D__x000D_

import { createHistory } from 'history';_x000D__x000D_

import {Provider} from ""react-redux"";_x000D__x000D_

import Home from ""./container/Home"";_x000D__x000D_

import {Bridge} from ""./router-bridge/Bridge"";_x000D__x000D_

import {T} from ""./components/T"";_x000D__x000D_

import store from ""./store"";_x000D__x000D_

_x000D__x000D_

_x000D__x000D_

_x000D__x000D_

class Tj extends React.Component {_x000D__x000D_

_x000D__x000D_

   render() {_x000D__x000D_

        const history = useRouterHistory(createHistory)({_x000D__x000D_

       basename: '/test'_x000D__x000D_

       });_x000D__x000D_

    return (_x000D__x000D_

        <Router history={history}>_x000D__x000D_

            <Route path={""/""} component={Bridge} >_x000D__x000D_

                <IndexRoute component={Home} />_x000D__x000D_

                <Route path={""user""} component={T} />_x000D__x000D_

                <Route path={""home""} component={Home} />_x000D__x000D_

            </Route>_x000D__x000D_

            <Route path={""/test/""} component={Bridge} >_x000D__x000D_

                <IndexRoute component={Home} />_x000D__x000D_

                <Route path={""user""} component={T} />_x000D__x000D_

                <Route path={""home""} component={Home} />_x000D__x000D_

            </Route>_x000D__x000D_

            <Route path={""home""} component={Home} />_x000D__x000D_

        </Router>_x000D__x000D_

    );_x000D__x000D_

  }_x000D__x000D_

 }_x000D__x000D_

  render(_x000D__x000D_

   <Provider store={store}>_x000D__x000D_

    <Tj/>_x000D__x000D_

</Provider>,_x000D__x000D_

window.document.getElementById('mainContainer'));_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

So when I use web pack dev server, my router works fine but when I copy the files to the web content of eclipse project ( which will consequently set up everything for me and make the project deplyable and reachable with this Url http://localhost:8080/test/index.html) I get the following error in my browser console:

_x000D__x000D_ _x000D__x000D_

_x000D__x000D_
Warning: [react-router] Location ""/test/index.html"" did not match any routes
_x000D__x000D_

_x000D__x000D_ _x000D__x000D_

I also looked at some posts similar to this such as :

_x000D__x000D_ _x000D__x000D_