Working with Objects in React

Exploring various ways objects are used within React libraries

Modern apps rely heavily on objects and their properties

This article aims to break down a range of scenarios where objects are used in React and React Native.

The concepts discussed here can also be applied to React JS (React for the web), as the features of the two versions are identical at the component level. Where React for the DOM and React Native differ is their handling of components (pertaining to DOM elements or native mobile components), not in the framework’s defining features like components, props, state, refs, context, and others.

Mobile apps of today rely on complex objects to represent a range of data types and values, that range from component props to server responses, objects to arrays (and converting between the two), functions and classes.

A class in JavaScript (introduced in the ECMAScript6 [2015] edition) is a type of function, declared with the class keyword instead of the function keyword and implements the constructor, introduces context with this, class properties, and the ability for instantiation. An object in JavaScript however is a type of variable that can contain many values. Instantiating classes will therefore instantiate a variable too, albeit with values persisting to the class’s structure.

This piece will firstly discuss object capabilities at a high level, then explore various ways to use and manipulate them along with the syntax used to do so.

Objects at a High Level

To clear up any ambiguity before continuing, an object in JavaScript can be represented like so:

// defining a multi-dimensional object
const myObj = {
  name: 'Ross',
  writing: true,
  enjoyment: 10,
  meta: {
    minutesWriting: 20,
    minutesProcrastinating: 0,
  }
};

Defining an object with const will make it immutable. If the object needs to be manipulated further to get to a final state, use let instead.

Objects are typically defined in camel-case styling, and can be multi-dimensional, like the above example demonstrates with the…