import React from 'react' ; import { Component } from 'react' ; import { connect } from 'react-redux' ; import * as actions from '../actions' ; export class Node extends Component { handleIncrementClick = ( ) => { const { increment , id } = this . props ; increment ( id ) ; } ; handleAddChildClick = e => { e . preventDefault ( ) ; const { addChild , createNode , id } = this . props ; const childId = createNode ( ) . nodeId ; addChild ( id , childId ) ; } ; handleRemoveClick = e => { e . preventDefault ( ) ; const { removeChild , deleteNode , parentId , id } = this . props ; removeChild ( parentId , id ) ; deleteNode ( id ) ; } ; renderChild = childId => { const { id } = this . props ; return ( < li key = { childId } > < ConnectedNode id = { childId } parentId = { id } / > < /li>); } ; render ( ) { const { counter , parentId , childIds , id } = this . props ; return ( < div > Counter # { id } : { counter } { ' ' } < button className = "increment" onClick = { this . handleIncrementClick } > + < /button> { ' ' } { typeof parentId !== 'undefined' && < a href = "#" className = "deleteNode" onClick = { this . handleRemoveClick } style = { { color : 'lightgray' , textDecoration : 'none' } } > Delete < /a>} < ul > { childIds . map ( this . renderChild ) } < li key = "add" > < a href = "#" className = "addChild" onClick = { this . handleAddChildClick } > Add child < /a> < /li> < /ul> < /div>); } } function mapStateToProps ( state , ownProps ) { return state [ ownProps . id ] ; } const ConnectedNode = connect ( mapStateToProps , actions ) ( Node ) ; export default ConnectedNode ;