0

It is confusing to me that = seems to assign values to variables as it usually does in other languages, but what does : do?

I feel like it is assigning functions or some other stuff to a variable.

What exactly it is doing?

Here is an example:

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

The colon is after DatePicker

Nope
  • 22,147
  • 7
  • 47
  • 72
Meggie
  • 81
  • 1
  • 1
  • 6
  • That colon is actually unrelated to React itself. It's a (rather cool) built in feature of Javascript! – Robbie Wxyz Jun 21 '17 at 14:22
  • This has nothing to do with react. This is plain old javascript [object initialiazer](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer) I do recommend you to read some basic js tutorial before deep diving into react or any other lib. – Yury Tarabanko Jun 21 '17 at 14:22
  • 1
    Learn the basics of JavaScript before learning ReactJS – Weedoze Jun 21 '17 at 14:23

3 Answers3

0

This isn't so much a react.js thing as it is a JSON thing. JSON is the JavaScript Object Notation. Here : is used within {} to assign properties to the object. MyComponents becomes an object and you can access properties as MyComponents.DatePicker.

John Pavek
  • 2,595
  • 3
  • 15
  • 33
0

That isn't anything React specific. That is just saying that MyComponents is an object and DatePicker is one of it's values.

It's no different from defining a normal object:

const food = {
    apple: 'Apple',
    banana: 'Banana'
};
samanime
  • 25,408
  • 15
  • 90
  • 139
0

I don't know react but I'm pretty sure this is just standard javascript syntax for defining methods in objects. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods

objectName.methodname = function_name;

var myObj = {
  myMethod: function(params) {
    // ...do something
  }

  // OR THIS WORKS TOO

  myOtherMethod(params) {
    // ...do something else
  }
};
dkns
  • 187
  • 3
  • 10