react components prop spread operator sandbox

react-components-props-spread-operator.js

//http://www.webpackbin.com/NkMEv-_7M

import React from 'react';
import {render} from 'react-dom';
import HelloWorld from './HelloWorld.js';

const divContainer = document.querySelector('#app')

const obj1 = {
  first: 'kevin'
}

const obj2 = {
  last: 'smith'
}

const obj3 = {
  color: 'blue',
  shape: 'circle'
}

const obj4 = {
  shape: 'square',
  hammer: 'nail'
}

const theComponent1 = <HelloWorld {...obj1} {...obj2} ></HelloWorld>
const theComponent2 = <HelloWorld {...{...obj1, ...obj2}} ></HelloWorld>
//const theComponent3 = <HelloWorld {...obj1, ...obj2 } ></HelloWorld>
//const theComponent4 = <HelloWorld {{...obj1, ...obj2 }} ></HelloWorld>
const theComponent5 = <HelloWorld {...{obj1, obj2}} ></HelloWorld>
      
render(theComponent5, divContainer);


/*
 *** CASE 1
{
  first: "kevin",
  last: "smith"
}

*** CASE 2
{
  first: "kevin",
  last: "smith"
}

*** CASE 3
(error) - this doesn't work due to parsing error

*** CASE 4
(error) - this doesn't work due to parsing error

*** CASE 5
{
  obj1: {
    first: "kevin"
  },
  obj2: {
    last: "smith"
  }
}

*/