ReactJS state vs props - where to keep source of truth for a To Do app -

i starting on reactjs angular world , confused having keep track of json data object , how edit , remove items.

var mytasks = {   "tasks": [     {       "name": "home tasks",       "type": "home",       "tasklist": [         {           "id": 1,           "todo_name": "go home",           "user": "scotty",           "actions": [             {               "name": "delete",               "action": "delete.php"             }           ]         },         {           "id": 2,           "todo_name": "go work",           "user": "scotty",           "actions": [             {               "name": "delete",               "action": "delete.php"             }           ]         }       ]     },     {       "name": "work tasks",       "type": "work",       "tasklist": [         {           "id": 1,           "todo_name": "go home",           "user": "scotty",           "actions": [             {               "name": "delete",               "action": "delete.php"             }           ]         },         {           "id": 2,           "todo_name": "go work",           "user": "scotty",           "actions": [             {               "name": "delete",               "action": "delete.php"             }           ]         }       ]     }   ] } 

let's break components (code incorrect , trying illustrate idea).

var tasks = react.createclass({      <tasklistpertype/> }); var tasklistpertype = react.createclass({     <tasklistpertype_actions /> }); var tasklistpertype_actions = react.createclass({ }); 

i thinking of creating state of data on tasks component , pass states props child components. want add delete function on tasklistpertype_actions component.

question each component has own states , when add functions such delete, need act on state within component , when act on state, automatically update state in parent it's passed children props?

for react make sense, have first forget mvc javascript. sure, can use mvc, react made one-direction data binding. that, mean data (or class containing data, emits events) triggers changes in view. check out flux , concept become more clear.

typically, don't want state on every component. each component should concerned it's own state. if, in event there storage required, should separated it's own object , object should source of change.

there no data mutation happening in react, each state change triggers complete re-render of view. confusing @ first, becomes easier start understand way react wants data flow.

here full example of react application implemented using flux which, imo, natural way create react apps.