checkbox does not retain state in React - forms

Question

when i click a checkbox in a tag panel, then it becomes checked as expect. But when i switch to another panel, and then switch back, i found that checkbox which should be checked turn to unchecked. how do i fix this?
here is my code, and i use react-tab-panel from npm.
Container:
export default class Container extends Component {
static propTypes = {
};
constructor(props) {
super(props);
this.state = {
chosenItem: {
a: [],
b: [],
c: [],
d: []
}
};
}
handleCheckBoxChange = (e) => {
const value = e.target.value;
const item = e.target.attributes.getNamedItem('data-tag').value;
const chosenItem = this.state.chosenItem;
const index = chosenItem[item].indexOf(value);
if (index > -1) {
chosenItem[item].splice(index, 1);
}
chosenItem[item].push(value);
}
render() {
return (
<div>
<Panel
handleCheckBoxChange={this.handleCheckBoxChange}
/>
</div>
);
}
}
Panel:
import TabPanel from 'react-tab-panel';
import 'react-tab-panel/index.css';
import CheckBox from './CheckBox.jsx';
export default function Panel({
handleCheckBoxChange
}) {
const tabList = {
a: ['1', '2'],
b: ['1', '2'],
c: ['1', '2'],
d: ['1', '2']
};
return (
<TabPanel
tabPosition="left"
>
{
Object.keys(tabList).map((key) => {
return (
<form
key={key}
tabTitle={key}
>
{
tabList[key].map((item) =>
<CheckBox
key={item}
value={item}
handleCheckBoxChange={handleCheckBoxChange}
tag={key}
/>
)
}
</form>
);
})
}
}
</TabPanel>
);
}
Checkbox:
export default function CheckBox({
tag,
value,
handleCheckBoxChange
}) {
return (
<div>
<label>
<input
type="checkbox"
value={value}
onChange={handleCheckBoxChange}
data-tag={tag}
/>
{value}
</label>
</div>
);
}

Answer 1

You should consider using Flux or Redux for storing your application state tree.