Why the UI updated just after refresh page in ReactJs - reactjs

Question

I'm new in ReactJs and I got stuck in this issue and couldn't find any solution by browsing. Please let me know if this has been answered somewhere else.
My first problem is how can I update the component on the same page in React. I thought it should happen automatically when the state is changed but in my case, it doesn't.
What I'm trying to do is API call after onClick on div and shows the Child list instead of the current list in a specific part of the page (component) and this process continues up to end of the parent/child list. but when I click the div, a value of Localstorage is updated, the API successfully called and everything goes to the right place except showing the result on the page. Once I refresh the page the updated list shows well.
I thought maybe it's because I handle onclick in Childlist component but when I move it to the main component nothing changed.
Also, I would be grateful if you have any tips for coding better.
this is my code :
Parent component :
export class MainP5 extends React.Component {
constructor(props) {
super(props);
this.handleNextBtn = this.handleNextBtn.bind(this);
this.handleBackBtn = this.handleBackBtn.bind(this);
this.childItemHandler = this.childItemHandler.bind(this);
this.state = {
Items: '',
doRedirect: false,
doRedirectBack: false,
doNothing: false
};
}
componentDidMount() {
let selectedItemID = localStorage.getItem('SelectedTemplateID');
let itemIdList = "[\"" + localStorage.getItem('SelectedSectionsChildID') + "\"]";
request
.post(conn.GetItems)
.query({templateId: selectedItemID})
.send(itemIdList)
.set('Authorization', `Bearer ${localStorage.getItem("tokenId")}`)
.set('Content-Type', 'application/json-patch+json')
.set('accept', 'application/json')
.set('dataType', 'jsonp')
.end((err, res) => {
this.setState({
Items: res != null ? res.text : ""
});
});
}
childItemHandler(selectedID) {
alert(selectedID);
this.setState({
doNothing: true
});
localStorage.setItem('SelectedSectionsChildID', selectedID);
}
handleNextBtn(e) {
this.setState({
doRedirect: true
});
}
handleBackBtn(e) {
this.setState({
doRedirectBack: true
});
}
render() {
let {doRedirect, doRedirectBack, Items} = this.state;
const FixedListFields = JSON.parse(("[" + (Items.substring(1, Items.length - 1)) + "]"));
console.log("===> " + FixedListFields);
if (doRedirect) {
return (<Redirect to={`/assessment/page6?id_token=${localStorage.getItem("tokenId")}`}/>)
} else if (doRedirectBack) {
return (<Redirect to={`/assessment/page4?id_token=${localStorage.getItem("tokenId")}`}/>)
} else {
return (
<div>
<Grid>
<Row style={{height: '100vh'}}>
{/*---------------------- Right Section --------------------------------*/}
<Col sm={8}>
{FixedListFields.map((item, i) => {
return <div key={i}>
<Row className="margin_h">
<Col sm={12}>
<h3 id="header1">{item.label}</h3>
</Col>
</Row>
<Childlist childItemHandler={this.childItemHandler} key={item.childIds} childIds={item.childIds}/>
</div>
})}
</Col>
</Row>
</Grid>
</div>
);
}
}
}
Childlist Component :
class Childlist extends React.Component {
constructor(props) {
super(props);
this.checkBoxHandler = this.checkBoxHandler.bind(this);
this.childItemHandler = this.childItemHandler.bind(this);
this.state = {
ChildItems: '',
selectedCheckboxes: true,
selectedSectionIds: [],
redirectToChildItemList: false,
};
}
componentWillMount = () => {
this.selectedCheckboxes = new Set();
};
componentDidMount() {
let selectedItemID = localStorage.getItem('SelectedTemplateID');
let itemIdList = (this.props.childIds + '').split(",");
request
.post(conn.GetItems)
.query({templateId: selectedItemID})
.send(itemIdList)
.set('Authorization', `Bearer ${localStorage.getItem("tokenId")}`)
.set('Content-Type', 'application/json-patch+json')
.set('accept', 'application/json')
.end((err, res) => {
this.setState({
ChildItems: res != null ? res.text : ""
});
});
}
childItemHandler(selectedID) {
localStorage.setItem('SelectedSectionsChildID', selectedID);
}
render() {
if (this.state.redirectToChildItemList) {
return (<Redirect to={`./page5?id_token=${localStorage.getItem("tokenId")}`}/>)
} else {
let {ChildItems} = this.state;
const FixedChildListFields = JSON.parse(("[" + (ChildItems.substring(1, ChildItems.length - 1)) + "]"));
const temp = this.state.selectedSectionIds + '';
let tempArray = temp.split(",");
return FixedChildListFields.map((childItem, i) => {
return <div>
<Row className="margin_m">
<Col sm={11}>
<div>
<div onClick={ () => this.props.childItemHandler(childItem.id) }
className="list_block" key={i}>
<span>{childItem.label} : </span>
<span>{childItem.description} </span>
{(childItem.childIds) ? (<img className=" align_vertical align_right"
src={arrow}
alt={'img'} width="40px" height="40px"/>) : ""
}
</div>
</div>
</Col>
</Row>
</div>
}
)
}
}
}