When defining our containers we can create subresources within resources. Subresources are defined in exactly the same way as resources and are placed in the subs key of the resource.
import React, { Component } from 'react'
import { createContainer } from 'react-interact'
class TodoList extends Component {
render() {
return (
<ul>
{this.props.todos.map(todo => (
<li key={todo.id}>
{todo.title}
<ul>
{todo.subTodos.map(subTodo => (
<li
key={subTodo.id}
onClick={this.handleRemoveSubTodo.bind(this, todo.id, subTodo.id)}
>{subTodo.title}</li>
))}
</ul>
<a
onClick={this.handleAddSubTodo.bind(this, todo.id)}
>
Add SubTodo
</a>
</li>
)}
</ul>
)
},
handleAddSubTodo(id) {
this.props.interact.todos({id}).subTodos.create({})
},
handleRemoveSubTodo(id, subId) {
this.props.interact.todos({id}).subTodos({id: subId}).remove()
},
}
export default createContainer(TodoList, {
todos: {
base: '/api/v1/todos',
item: '/${id}',
subs: {
subTodos: {
base: '/sub_todos',
item: '/${id}',
},
},
},
})