<div id="root"></div>
import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
import Immutable from 'https://cdn.skypack.dev/immutable';

const {useState} = React;
const {Map} = Immutable;

function Parent (){
  const [state,setState] = useState(new Map({count:0}));
  return <div>
    <p>count: {state.get('count')}</p>
    <button onClick={()=>
        setState( s=>{return s.set('count',s.get('count')+1)} ) 
      }>Increment</button>
    <Child state={state}/>
  </div>
}

function Child({state}){
  const stateWithFiveAdded = state.set('count',state.get('count')+5);
  return <div><p>count + 5 = {stateWithFiveAdded.get('count')} </p></div>
}

ReactDOM.render(<Parent/>,document.getElementById("root"))
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.