andregardi

<h1>Products catalog</h1>
<h2>Apple <button value="apple">Add to cart</button></h2>
<h2>Banana <button value="banana">Add to cart</button></h2>
<h2>Orange <button value="orange">Add to cart</button></h2>

<script>
  const addToCart = e => window.parent.postMessage(e.target.value, "*");
  document
    .querySelectorAll("button")
    .forEach(button => button.addEventListener("click", addToCart));

andregardi

<style>
  body {
    display: flex;
  }
  iframe {
    flex: 1;
    border: none;
  }
</style>
<iframe src="./catalog/index.html" id="catalog"></iframe>

andregardi

 updateJohnAge = ()=>{
    const people = [...this.state.people];
    const johnClone = {...people[1]};
    johnClone.age = 31;  
    people[1] = johnClone;
    this.setState({people});
    //This will work.
  }

andregardi

class Person extends Component {
  render() {
    const { person } = this.props;
    return (
      <div>
        <p>name: {person.name}</p>
        <p>age: {person.age}</p>
      </div>
    );
  }

andregardi

class People extends Component {
  constructor(props) {
    super(props);
    this.state = {
      people:[{ name: "mary", age: 25 }, { name: "john", age: 30 }]
    };
  }

  updateJohnAge = ()=>{
    const people = [...this.state.people];

andregardi

let oldProps = null;
function shallowCompare (props){
  if(props !== oldProps) console.log(props);
}

const john = { name: "john", age: 30 };

shallowCompare(john) // prints -> { name: "john", age: 30 }

const johnClone = {...john};

andregardi

let oldProps = null;
function shallowCompare (props){
  if(props !== oldProps) console.log(props);
  oldProps = props;
}

const mary = { name: "mary", age: 20 };
const john = { name: "john", age: 30 };

shallowCompare(mary) // prints -> { name: "mary", age: 20 }

andregardi

const people = [{ name: "mary", age: 20 }, { name: "john", age: 30 }];
const john = people[1];
const jonhClone = { name: "john", age: 30 };

console.log(john === people[1]) // true
console.log(john === jonhClone) // false

people[1].age = 31;

console.log(john) // { name: "john", age: 31 }

andregardi

import React, { useState } from "react";

export const IntlContext = React.createContext();

export const IntlParent = props => {
  const [idiom, setIdiom] = useState("en-US");
 
  const translate = translations => {
    const translated = {};
    const commomKeys = Object.keys(commom);

andregardi

import React, { useState } from "react";
import { en_US, pt_BR, es_ES } from "./idioms";
import * as commom from "./commom";
import { listCountries } from "./countries";
import countryVsIdiom from "./countryVsIdiom.json";

export const countryNameToInitials = country => {
  const row = countryVsIdiom.find(row => row.country === country);
  return row.initials || "BR";
};