<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.