Want to uncheck the node of the tree structure in React JS - reactjs

Question

I have tree structure. What I needed is to uncheck the lover level of the tree when a level higher to it is checked.
But it is not working as I said above. What I have now is shown in the picture below
I clicked TPL
Clicked Accident Report(39)
3 During this time uncheck TPL
Code:
onCheck(checkedKeys) {
const {
FilterTaskList
} = this.props;
console.log(checkedKeys);
var checked2 = [];
if (checkedKeys.checked.length != 0) {
var addedkey = checkedKeys.checked[checkedKeys.checked.length - 1];
checked2 = _.filter(checkedKeys.checked, (o) => o.substring(0, addedkey.length + 1) != addedkey + "-");
}
checkedKeys.checked = checked2;
this.setState({
checkedKeys,
ischecked: true
});
let selectedLevel = 0;
let leveldata = [];
var checked = checkedKeys.checked;
const data = [];
const dataremove = [];
const AllLevel = [];
checked && checked.forEach((value) => {
var keys = value.split("-");
var task;
if (keys.length == 1) {
task = FilterTaskList[keys[0]];
data.push({
'TID': task.TID,
'TeamID': this.props.TeamId,
'RefID': task.REfID,
'FinClass': '',
'TLID': task.TLID,
'SelectionLevel': 2,
'SubTeamID': task.STID,
'Type': task.Type
});
AllLevel.push(2);
}
if (keys.length == 2) {
task = FilterTaskList[keys[0]].Chidrens[keys[1]];
data.push({
'TID': task.TID,
'TeamID': this.props.TeamId,
'RefID': task.REfID,
'FinClass': task.FinClass,
'TLID': task.TLID,
'SelectionLevel': 3,
'SubTeamID': task.STID,
'Type': task.Type
});
AllLevel.push(3);
}
if (keys.length == 3) {
task = FilterTaskList[keys[0]].Chidrens[keys[1]].Chidrens[keys[2]];
data.push({
'TID': task.TID,
'TeamID': this.props.TeamId,
'RefID': task.REfID,
'FinClass': task.FinClass,
'TLID': task.TLID,
'SelectionLevel': 4,
'SubTeamID': task.STID,
'Type': task.Type
});
AllLevel.push(4);
}
if (keys.length == 4) {
task = FilterTaskList[keys[0]].Chidrens[keys[1]].Chidrens[keys[2]].Chidrens[keys[3]];
data.push({
'TID': task.TID,
'TeamID': this.props.TeamId,
'RefID': task.REfID,
'FinClass': task.FinClass,
'TLID': task.TLID,
'SelectionLevel': 5,
'SubTeamID': task.STID,
'Type': task.Type
});
AllLevel.push(5);
}
The Id's of the tree as follows(backend)(Eg:):
2
2-0
2-0-0

Answer 1

To handle children's state from parent is basically react anti-pattern. You can solve it by registering children refs in parent and touch its checked status via refs. But at the and of the day, I always end up using redux in these cases, it is much cleaner.
Store the whole tree in global state and on firing uncheck action on parent the reducer handle the children's checked state based on parent id.
Meanwhile all the lines are connected components watching their own state based on their ids.
const reducer = (state, action) => {
let isUnchecking;
switch (action.type) {
case 'TOGGLE': return state.map(line => {
if (line.id === action.payload.id) {
isUnchecking = line.checked;
return { ...line, checked: !line.checked }
}
if (line.parent == action.payload.id && isUnchecking) {
return { ...line, checked: false }
}
return line;
});
default: return state;
}
}
const initialState = [
{ id: 1, checked: true, parent: null },
{ id: 2, checked: true, parent: 1 },
{ id: 3, checked: false, parent: 1 },
{ id: 4, checked: false, parent: null }
]
const store = Redux.createStore(reducer, initialState);
const Line = ({ checked, onClick, label, children }) => (
<li onClick={onClick}>
<span>{checked ? '[x] ' : '[_] '}</span>
{label}
<ul>{children}</ul>
</li>
)
const mapStateToProps = state => ({ lines: state })
const LineContainer = ReactRedux.connect(mapStateToProps)(props => {
const { id } = props;
return (
<Line
{...props}
onClick={e => {props.dispatch({ type: 'TOGGLE', payload: { id } }); e.stopPropagation();}}
checked={props.lines.find(line => line.id === id).checked}
/>
)
}
)
class App extends React.Component {
render(){
return (
<ReactRedux.Provider store={store}>
<LineContainer id={1} label="Accident Report">
<LineContainer id={2} label="TPL" />
<LineContainer id={3} label="WC" />
</LineContainer>
<LineContainer id={4} label="Administrative Supervisor" />
</ReactRedux.Provider>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/6.0.1/react-redux.js"></script>
<div id="root"></div>