react native arrays and objects

Question

I just need a simple lesson in objects and constructors.

var mapMarkers = {
    key: null,
    contactName: null,
    location: null,
};

var markersArray = Object.keys(mapMarkers);

class Map extends Component {

    renderMarker = ({ key, contactName, location }) => {
        newMarker = new mapMarkers(key, contactName, location);
    }

Recurring theme for me, there is no information online for how to do this. I need an actual working example to be able to follow, theory is useless.

What I am trying to do is define an object type called mapMarkers with its own attributes. Then I would like to dynamically be able to create instances of this object and populate them into an array.

The end goal for this is to try and use this array to populate my map with markers. The error I am getting is that:

newMarker = new mapMarkers(key, contactName, location);

is not a valid constructor, according to the compiler. So I want to know what a valid constructor for this would look like, as the information online tell me nothing.

Also, what does:

var markersArray = Object.keys(mapMarkers);

actually do? Does keys mean that when I instantiate an object it automatically populates this array? Or do I need an additional step to do this?

Thanks guys.

Edit: The suggested answer is not relevant to me at all, the language does not appear to be the same and I cannot see a working example in there anywhere that I can compile and run. They are also not trying to do the same things as described here.

Possible duplicate of What is the modern way to structure a "class" in JavaScript? — bennygenel
– bennygenel, Commented Apr 30, 2018 at 8:45
Doesn't look anything like an answer mate, thank you though. — Bisclavret
– Bisclavret, Commented Apr 30, 2018 at 8:50
Suggest to read about javascript classes. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Bk Santiago
– Bk Santiago, Commented Apr 30, 2018 at 9:09

bennygenel · Accepted Answer · 2018-04-30 09:21:52Z

You have mixed up lots of different things together and there is a lot of documentation on what are these online. You just need to deal with them separately and then combine them for your project's needs.

1) `new` operator

As the MDN doc's on new operator describes;

The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

Sample

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

var car1 = new Car('Eagle', 'Talon TSi', 1993);

console.log(car1.make);
// expected output: "Eagle"

2) `Object.keys`

As the MDN doc's on Object.keys() describes;

The Object.keys() method returns an array of a given object's properties names, in the same order as we get with a normal loop.

Sample

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

3) Creating an array of objects

If you just in need of creating an array of object, you can just think simpler. Creating a for loop or a similar loop to create desired number of objects and pushing them into an array is the way to go.

Sample

const desiredNumberOfObjects = 20;
let markers = [];

for(let i = 0; i < desiredNumberOfObjects; i++) {
  markers.push({
    location: 'some location for index',
    key: 'some key for index',
    contactName: 'some contactName for index'
  });
}

Above code will create a 20 item array with the populated values.

4) Javascript `class`es

As the MDN doc's on classes describes;

Classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.

You can use classes for more complex object creations. If you in need of operations with the created object or if you have repetitive function you need to run with the object created.

Sample

class Marker {
  constructor(key, contactName, location) {
    this.key = key;
    this.contactName = contactName;
    this.location = location;
  }

  changeName(name) {
    this.contactName = name;
  }

  getLocation() {
    return `geo(${this.location.lang}, ${this.location.long})`;
  }
}

var marker = new Marker('someKey', 'contact name for this marker', { lang: '45', long: '32'});
console.log(marker.getLocation()); // will print 'geo(45,32)'
marker.changeName('new name for marker'); // will change name of this marker

5) Conculution

Doing more research, separating not understood code samples into smaller pieces and trying to understand these pieces is the key.

This was beautiful mate, thank you so, so much. Everything I needed was here. You are a gem.

Collectives™ on Stack Overflow

react native arrays and objects

1 Answer 1

1) `new` operator

2) `Object.keys`

3) Creating an array of objects

4) Javascript `class`es

5) Conculution

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1) new operator

2) Object.keys

3) Creating an array of objects

4) Javascript classes

5) Conculution

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related

1) `new` operator

2) `Object.keys`

4) Javascript `class`es