ecmascript-6,react-native , Attempted to assign to readonly property ECMAScript React Native


Attempted to assign to readonly property ECMAScript React Native

Question:

Tag: ecmascript-6,react-native

I am trying to assign a value to an array declared in my Component. Unfortunately, exception is thrown.

TypeError: Attempted to assign to readonly property

Even if I remove strict mode, still exception is being raised. Can please someone guide me how can I make a variable both readable and writable? Thanks..!

Code:

class RootView extends Component {

  cachedData : []; //declared array here


//trying to assign dictionary in some function

someFunction(results) {

    this.cachedData[this.state.searchString.length - 1] = results;
    //exception raised here
}

}

Answer:

Your syntax is incorrect. Add it to a constructor.

class RootView extends Component {

  constructor() {
    super();
    this.cachedData = [];
  }
  someFunction(results) {
    this.cachedData[this.state.searchString.length - 1] = results;
  }
}

Related:


ServiceWorker and Push Notification Payload


node.js,android-gcm,ecmascript-6,service-worker,chrome-gcm
Community: ServiceWorker is a great advance technology in terms of cache managment, but I have some questions associated with other operations such as: Push Notification: I made a GCM integration (Google Clud Message) and NodeJS, following this article, the problem is that when GCM sends the information to the client...

React Native Change State With Unexpected Logging


javascript,state,react-native
For context, I am working on this React Native Tutorial The way this logs confuses me. The following is the console output when I changed an empty input field by typing "a" then "b". Here's my SearchPage class. Why does console.log('searchString = ' + this.state.searchString); show the previous value for...

how to correctly use promises to return 2 different results [duplicate]


javascript,promise,ecmascript-6,es6-promise
This question already has an answer here: How do I access previous promise results in a .then() chain? 6 answers I am trying to use Promises in JavaScript using ES6 to return data from 2 methods from an object, which would in production call out to an endpoint. My...

How does `this` work in default parameters?


javascript,ecmascript-6
So... ES6¹ (which happens to be standardized a few hours ago) brings default parameters for functions similar to those in PHP, Python etc. I can do stuff like: function foo (bar = 'dum') { return bar; } foo(1); // 1 foo(); // 'dum' foo(undefined); // 'dum' MDN says that the...

Do I have to call super.componentDidUpdate in React?


reactjs,ecmascript-6
In a subclass of React.Component, do I have to call super.componentDidUpdate from my componentDidUpdate method? Or is it done automatically? (I am trying to call it but there is an error message Cannot read property call of undefined)...

“Import” ES6 for Node


javascript,node.js,ecmascript-6
I want to use import from ES6 rather than require from common.js in Node. For some reason I thought import would work by default in Node. But looks like it does not. Is there some npm package i need to install for that to work?

React Native Inspect Element


react-native
In a previous example project I was able to type command+D in the simulator and the menu had an option to "Inspect Element" but for some reason my new project doesn't have that option. How can I get the inspect element option in my current project?

can es6 class have public properties as well as functions?


javascript,class,properties,public,ecmascript-6
All the examples of classes I see are class myClass{ constructor(){} someFunction(){} what I want to add is someObject {myvalue:value} } this doesn't seem to compile. An old fashioned object would be { somefunction: function(){} someProperty: {myvalue:value} } is this not possible in es6 classes?...

How to use Firebase Twitter Authentication with React Native?


twitter,firebase,react-native
How to use Firebase Twitter Authentication with React Native? I tried both of the code below in reference to https://www.firebase.com/docs/web/guide/login/twitter.html var Firebase = require("firebase"); var App = React.createClass({ render: function() { return ( <View> <Text onPress={this._handlePress}> Twitter login </Text> </View> ); }, _handlePress: function () { var myApp = new...

why obj={x,y} works in Chrome?


javascript,ecmascript-6
var obj = { type: 'data', x, y, data: []} Obviously this was my typo, {x,y} should have been {x:x, y:y}. But it does what I want, in Chrome, field x gets the value of a local variable x. But why does it work?...

How to properly bind current object context in ES6 using babelify


ecmascript-6,babel
I'm trying to bind current instance to the class method, please note ES6 syntax. class SomeClass { search() => { ... } } Which is 100% legit code, however babelify doesn't want to compile it SyntaxError: /Users/vladmiller/Projects/test/test/client/test/app/pages/Search.react.js: Unexpected token (50:26) while parsing file: /Users/vladmiller/Projects/test/test/client/test/app/pages/Search.react.js\ Instead now I have to bind...

Explanation of `let` and block scoping with for loops


javascript,ecmascript-6
I understand that let prevents duplicate declarations which is nice. let x; let x; // error! Variables declared with let can also be used in closures which can be expected let i = 100; setTimeout(function () { console.log(i) }, i); // '100' after 100 ms What I have a bit...

Change view in Navigator in React Native


react-native
I'm new to react native. I was using NavigatorIOS but it was too limiting so I'm trying to use Navigator. In NavigatorIOS I can change a view by calling this.props.navigator.push() but it doesn't work in Navigator, it seems to be structured differently. How do I change views in using Navigator?...

Writing the most basic Unit test in Angular 2?


javascript,unit-testing,karma-runner,ecmascript-6,angular2
Problem: As soon as I import Angular 2 into a file none of my tests execute. Question: How can I set up my karma config to support angular two so my test pass properly? OR Question: How can I set up any testing framework with angular2 written in es6? Git...

No transports available


sockets,firebase,react-native
I recently was trying to upgrade my react-native app to use react-native 0.5.0 and firebase. According to this article the react-native sockets are working and the full firebase sdk should be available. I was previously using firebase-debug and @badfortrains react-native fork with success following the example project https://github.com/badfortrains/wsExample. Since upgrading...

Input validation setTimeout in ReactJS


javascript,css,validation,reactjs,ecmascript-6
I have a component that renders with className="error" or classname="" depending on whether the input is valid or not. This way in CSS I can simply do .error { background: red; }. The validity of the input is determined by the isValidNumber(..) function. However, right now the problem I'm having...

promise – can't find variable process


javascript,promise,react-native,es6-promise
for my (first) react-native project I use the Node module react-native-refreshable-listview requiring a CommonJS/A+ promise method to display an indicator. However, everytime the promise's then method is invoked by the consumer (for example this.doSomething().then(function() { ... })) I get the following error: Error: Can't find variable: process stack: requestFlush index.ios.bundle:43767...

ES6 destructuring, dynamic assignment [duplicate]


javascript,ecmascript-6
This question already has an answer here: object destructuring without var 1 answer let text, value; if (typeof f == 'string') { text = value = f; } else { let { text, value } = f; } Doing this creates two new vars (from the else), however if...

Can I use Backbone with React Native?


javascript,ios,backbone.js,reactjs,react-native
I have found several different examples of integrating React (View) with Backbone on the web, but not any to do the same with React Native. I was wondering if this was possible and also if there were any samples to play with. This (https://github.com/magalhas/backbone-react-component) also seemed a good starting point,...

How do i use the iOS shake gesture with react native?


react-native
I'd like to use the shake gesture with React Native. Its currently used for the debug menu and i'm not sure how to override it. Does anyone know if this is possible?

React components as plain JS objects?


javascript,class,reactjs,javascript-objects,ecmascript-6
Does anybody has experience in working with React components as plain JS objects instead of annoying ES6 classes and deprecated .createClass method. Maybe you have some examples of factory functions or similar to share? Thanks!...

ES6 - Convert from 'require' to 'import'


ecmascript-6
If the alternative to: var Foo = require('foo'); is: import Foo from 'foo'; What is the alternative to: var Bar = require('foo').batz Could it be: import {batz} from 'foo' ? ...

Why should I use ES6 classes? [closed]


javascript,ecmascript-6
I have many question about ES6 classes. Since i understand how to use function and WebComponent, React & so. I didn't see many benefit using it. I wonder what's the benefit of using classes. I read that public/private/static will be part of ES7. So i see no point using it...

React Native global styles


react-native
I'm new with React and I understand the benefits of the component based, inline styles. But I'm wondering if there is a decent way to have some sort of global style. For instance, I'd like to use the same Text and Button coloring throughout my app. Rather than repeat in...

Obj-C category/extension Swift in Javascript ES6


javascript,ecmascript-6
I'm looking to add methods to a class in Javascript ES6 without creating a subclass of it, in the same way with the categories in Objective-C or extensions in Swift. I didn't find any information about it. Any suggestion?...

React Native AnimationExperimental callback?


javascript,react-native
I've been playing around with react native and animations and would like to run animations in serial or chain animations together. Is there a promise or a callback that fires when the animation is finished? This is what I have so far: AnimationExperimental.startAnimation({ node: this.refs['this'], duration: 500, easing: 'easeInOutCubic', property:...

react-native this.setState not working


reactjs,react-native
I know there's already a similar question but there's no code shared in there. Under navbarChanged() > if condition, I'm doing a this.setState. This is of type HomeTab but setState doesn't seem to be working. Any clues/pointers? class HomeTab extends React.Component { constructor() { super() this.setState({ isNavBarHidden: false }); }...

IntelliJ/Webstorm not finding import reference


javascript,intellij-idea,phpstorm,webstorm,ecmascript-6
I have the following project structure: root src scripts main.js foo.js Inside of my main.js file, I'm importing foo.js like so: import 'src/scripts/foo.js' When I click on the import statement above and go to Navigate -> Declaration I get a super helpful message that says Cannot find declaration to go....

ES2015 Babel String Interpolation not working with apostrophe (but does with double quotes)


javascript,ecmascript-6,babeljs
I am using babel / grunt to learn some ES2015. According to this post there is no real difference in Javascript between single and double quotes. i.e. 'test' and "test". When trying string interpolation though, it seems there is an issue with babeljs (or more likely - me). What is...

How to check if a variable is an ES6 class declaration?


javascript,class,prototype,ecmascript-6
I am exporting the following ES6 class from one module: export class Thingy { hello() { console.log("A"); } world() { console.log("B"); } } And importing it from another module: import {Thingy} from "thingy"; if (isClass(Thingy)) { // Do something... } How can I check whether a variable is a class?...

Executing promises in sequence: understanding a claim made about this example code


javascript,promise,ecmascript-6
I'm not looking for a solution for how to execute promises in sequence, I'm trying to understand the one given by a blog author: I am reading "We have a problem with promises" by Nolan Lawson, posted 18 May 2015. Under "Advanced mistake #3: promises vs promise factories" he has...

React Native - Image Require Module using Dynamic Names


react-native
I'm currently building a test app using React Native. The Image module, thus far has been working fine. For example, if I had an image named avatar, the below code snippet works fine. <Image source={require('image!avatar')}/> But but if I change it to a dynamic string, I get <Image source={require('image!' +...

MongoDB Object key with ES6 template string


javascript,mongodb,ecmascript-6
I'm trying to update an array in my collection with this: var str = "list.0.arr"; db.collection('connect').update({_id: id}, {$push: { `${str}`: item}}); This exact string works just fine if I do it like this: db.collection('connect').update({_id: id}, {$push: { "list.0.arr": item}}); This is to show that it works, but It's throwing an...

Create a subset object, consisting of only some of the properties of an existing object


javascript,ecmascript-6
This is best explained by example. The following works in es6 to create an object consisting of some of the keys of an existing object: var o = {a:1, b: 2, c: 3} var {a, c} = o var subsetObj = {a, c} // will be: {a:1, c:3} There are...

How to get a last element of ES6 Map without iterations?


containers,ecmascript-6
How to get a last element of ES6 Map/Set without iterations(forEach or for of) pass through a full length of the container?

Using React Native within existing iOS app for some views only


react-native
Is it possible to use React Native only for one view within the project? I've successfully added React view for particular iOS app screen (using instructions from "Integration with existing iOS project" docs), but i don't know how to get data from that screen and call other (objective-c) code. For...

Symbol.for(string) in ECMAScript 6


javascript,symbols,ecmascript-6
It took me a while but I finally figured out what the purpose of symbols in ECMAScript 6 is: avoiding name collision when attaching properties to shared objects - HTML elements e.g. (In case you're stuck on the same question, I recommend this article.) But then I stumbled upon Symbol.for()....

Is there any way to modify a Set data structure in iteration (ECMAScript 6)?


ecmascript-6
The Set object in ES6 has a forEach method, just like Array object does. Is there any way to modify the values when iterating over the Set object using the forEach method? For example: // Array object in ES5 can be modified in iteration var array = [1, 2, 3];...

Angular 1.4 + ngNewRouter + ES6 : Cannot read property '$routeConfig' of undefined


angularjs,ecmascript-6,angular-new-router
I am currently trying to throw together a basic working example of an Angular 1.4 app written with both the new router as well as ECMAScript 6. I have been fiddling with this code non stop and I don't understand why I am getting the error that is being thrown:...

React-native upload image to amazons s3


javascript,file-upload,amazon-s3,fetch,react-native
I want to upload images from my app to S3 server. I have all data and codes calculated (tested using curl on computer) but I can't figure out how to call 'fetch' correctly. I'm getting response: 'At least one of the pre-conditions you specified did not hold. Condition: Bucket POST...

Aurelia update value of bound item in another class


ecmascript-6,aurelia
I guess the question boils down how to i pass the instance of a property to another class. I have something like this: import timerClass from "./timer"; export class App { constructor() { this.timeLeft = 6; //<--- I want to update this new timerClass(this.timeLeft); } activate() { } } and...

React Native fetch is not a function


fetch,react-native
I'm trying to use react native for a simple app. I want to download a json array from a page and display it as a listview. I'm doing this var listApp = React.createClass({ fetchData : function() { fetch(requestURL) .then((response) => response.json()) .then((responseData) => { console.log(responseData); }) .done(); }, componentDidMount: function()...

ES6 read-only enums that can map value to name


enums,ecmascript-6
I would like to define an enum-like structure in JS, but have two requirements: The values be read-only, i.e. no users can assign to them. The values (0, 1, 2, ...) can be mapped back into the names (as with Java's name method) The methods I know to create enums...

Include paths for imports in babel using webpack


ecmascript-6,webpack,babeljs
Given a directory structure such as: project ├───common │ └───js └───src └───js is there any way to add import paths to webpack so that a script inside src/js can resolve code inside common/js if it cannot find anything else locally? Something like the code below would include common/js/CommonClass.js: import CommonClass...

ES6 Iterate over class methods


javascript,ecmascript-6
Given this class; how would i iterate over the methods that it includes? class Animal { constructor(type){ this.animalType = type; } getAnimalType(){ console.log('this.animalType: ', this.animalType ); } } let cat = window.cat = new Animal('cat') What I have tried is the following with no success: for (var each in Object.getPrototypeOf(cat)...

Using String.raw() with Node JS


javascript,node.js,ecmascript-6
I'm working on a Node.js app with and I would like to use String.raw() which is part of the ES 6 standard. However, when using it as in the documentation: text = String.raw`Hi\n${2+3}!` + text.slice(2); It returns SyntaxError: Unexpected token ILLEGAL for the character after String.raw. I think that there...

ECMAScript class


javascript,ecmascript-6
I have the following code which when the web page loads should print the car make and current speed to the console. Nothing is printed to the console. If I put the new object declaration inside a function it does print either. <!DOCTYPE html> <html> <head> <script type="application/ecmascript;version=6"> class Car...

Mixins for ES6 classes, transpiled with babel


javascript,mixins,ecmascript-6
According to various sources (2ality, esdiscuss) one should be able to add mixins to classes: EDIT discovered that class methods are not enumerable so that cannot work. Edited the code below, but still no joy class CartoonCharacter { constructor(author) { this.author = author; } drawnBy() { console.log("drawn by", this.author); }...

TouchableHighlight won't accept press events while keyboard is open


javascript,reactjs,react-native
I have a component which contains a TextInput and a TouchableHighlight side by side. You tap on the textbox, type what you want, then tap the add button to save it. Now the problem is the keyboard open from typing, you need to dismiss it, otherwise the button won't respond....

Dynamic key in immutability update helper for array


javascript,reactjs,ecmascript-6
https://facebook.github.io/react/docs/update.html I have an update function that receives an index along with the event so as to alter the value for that specific item in the array. How do I get index to be evaluated instead of treated as a set key in this scenario? Is it even possible? updateValue:...