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

Question

I am starting on ReactJS from Angular world and really confused with having to keep track of json data object and how to edit and 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 to 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 to work",
"user": "scotty",
"actions": [
{
"name": "delete",
"action": "delete.php"
}
]
}
]
}
]
}
Let's say I break it up into components (code is incorrect and I am just trying to illustrate the idea).
var Tasks = React.createClass({
<TaskListPerType/>
});
var TaskListPerType = React.createClass({
<TaskListPerType_Actions />
});
var TaskListPerType_Actions = React.createClass({
});
I was thinking of creating a state of data on Tasks component and then pass the states as props to the child components. I want to add a delete function on the TaskListPerType_Actions component.
Question is does each component has its own states and when I add functions such as delete, do I only need to act on the state within that component and when I act on that state, does it automatically update the state in the parent where it's passed to the children as props?

Answer 1

For React to make sense, you have to first forget about MVC javascript. Sure, you can use MVC, but React is made for one-direction data binding. By that, I mean that the data itself (or a class containing the data, which emits events) is what triggers the changes in the view. Check out Flux and this concept will become more clear.
Typically, you don't want state to be on every component. Each component should be concerned with only it's own state. If, in the event there is storage required, that should be separated into it's own object and that object should be the source of the change.
There is no data mutation happening in React, each state change triggers a complete re-render of the view. This is confusing at first, but it becomes easier as you start to understand the way React wants your data to flow.
Here is a full example of a React application implemented using Flux which, IMO, is the most natural way to create React apps.