spread-rest.js

import React from 'react';
import pt from 'prop-types';
import logo from './logo.svg';
import './App.css';
import { op } from './config'

// op()


function isObject(value) {
  const type = typeof value
  return value != null && (type === 'object' || type === 'function')
}

const deepFreeze = o => {
  const isObj = isObject(o)
  if (isObj) {
    console.log(`freezing:`, o)
    Object.freeze(o)
    for (let key in o) {
      deepFreeze(o[key])
    }
  }
}


const o = {
  name: 'John',
  info: {
    age: 33,
    children: [1, 2, 3],
    maritalStatus: {
      state: true,
      spouse: { name: 'Anna' }
    }
  }
}

//Object.freeze(o)
deepFreeze(o)
o.info.age = 40

function Button({ text, color }) {
  return (
    <button
      style={{ backgroundColor: color }}
    >
      {text}
    </button>
  )
}

Button.defaultProps = {
  text: 'CHANGEME',
  color: 'blue'
}

Button.propTypes = {
  text: pt.string.isRequired,
  color: pt.string.isRequired,
}

function App() {

  // let {color, text, border} = Button.defaultProps

  const { color, ...rest } = Button.defaultProps
  const btnPropsNoColor = {
    ...rest,
    disabled: true
  }
  console.log(`btnPropsNoColor`, btnPropsNoColor)

  const btnProps = {
    ...Button.defaultProps, //spread 
    text: 'Banana', //override
    border: 'thick' //addition
  }

  // const btnProps = Object.assign({}, Button.defaultProps, { text: 'Banana' })

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Button {...btnProps} />

      </header>
    </div>
  );
}

export default App;