wait for API call, then pass on initial value to component - reactjs

Question

I am having difficulties with creating an initial state for a component which relies on an API call.
In every way I tried to implement it, it get's into a loop of giving me the error that this.setState() is called during rendering, which is an anti patern,...
Question:
How is it possible to implement an initial state for a parent component depending on a child component's state? Only firing if there is nothing in the reduxstate
I could show code but it's quite extensive and divided between multiple files.
EDIT 1: As requested - simplified code
Parent component (Filter)
class Filter extends Component {
constructor(props) {
super(props);
this.state = {
active: '',
period: this.props.filter.period,
periodDisplay: null,
departments: this.props.filter.departments,
departmentsDisplay: null
};
this.updateFilterDepartments = this.updateFilterDepartments.bind(this);
this.updateFilterPeriod = this.updateFilterPeriod.bind(this);
this.initDepartments = this.initDepartments.bind(this);
}
componentDidMount() {
// Getting initial period
if (!this.state.period && this.props.initialFrom && this.props.initialTo) {
this.didSelectPeriod(this.props.initialFrom, this.props.initialTo);
}
else if (this.state.period) {
let initPeriod = this.state.period.match(/.{1,2}/g);
this.didSelectPeriod(
initPeriod[2] + initPeriod[3] + '-' + initPeriod[1] + '-' + initPeriod[0],
initPeriod[6] + initPeriod[7] + '-' + initPeriod[5] + '-' + initPeriod[4]
);
}
}
componentWillUnmount(){
this.setState({active: ''});
}
updateFilterPeriod() {
this.props.updateFilterPeriod(this.state.period);
}
didSelectPeriod(rawFrom, rawTo) {
if (rawFrom && rawTo) {
let From = moment(rawFrom),
To = moment(rawTo);
if (From.diff(To, 'days') === 0) {
this.setState ({
periodDisplay: From.format('D MMM YYYY'),
period: From.format('DDMMYYYY') + To.format('DDMMYYYY')
}, () => this.updateFilterPeriod());
}
else {
this.setState ({
periodDisplay: From.format('D MMM YYYY') + ' - ' + To.format('D MMM YYYY'),
period: From.format('DDMMYYYY') + To.format('DDMMYYYY')
}, () => this.updateFilterPeriod());
}
}
else {
this.setState({
periodDisplay: null,
period: null
}, () => this.updateFilterPeriod());
}
}
updateFilterDepartments() {
this.props.updateFilterDepartments(this.state.departments);
}
didSelectDepartments(hashes) {
if (hashes.length === 0) {
this.setState({
departments: null,
departmentsDisplay: null
}, () => this.updateFilterDepartments());
}
else {
this.setState({
departments: hashes,
departmentsDisplay: hashes.length + ' department(s) selected'
}, () => this.updateFilterDepartments());
}
}
render() {
return (
<div className='FILTER_wrapper' >
<div className={classnames('FILTER_section', {active: this.state.active == 'datepicker'})} onClick={() => this.setState({active: 'datepicker'})}>
<i className="fa fa-calendar FILTER_icon FILTER_icon--datepicker"></i><div className="FILTER_input FILTER_input--datepicker">{this.state.periodDisplay || <div className="placeholder">Select a period</div>}</div>
<div className={classnames('FILTER_dropdown FILTER_dropdown--datepicker', {active: this.state.active == 'datepicker'})}>
<DatePicker className='' didSelect={(rawFrom, rawTo) => this.didSelectPeriod(rawFrom, rawTo)} />
</div>
</div>
<div className={classnames('FILTER_section', {active: this.state.active == 'departmentpicker'})} onClick={() => this.setState({active: 'departmentpicker'})}>
<i className="fa fa-tags FILTER_icon FILTER_icon--departmentpicker"></i><div className="FILTER_input FILTER_input--departmentpicker">{this.state.departments ? this.state.departmentsDisplay : <div className="placeholder">Select department(s)</div>}</div>
<div className={classnames('FILTER_dropdown FILTER_dropdown--departmentpicker', {active: this.state.active == 'departmentpicker'})}>
<DepartmentPicker didSelect={(hashes, names) => this.didSelectDepartments(hashes)} />
</div>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
departments: state.departments,
filter: state.filter
};
}
Child component (DepartmentFilter)
class DepartmentPicker extends Component {
callCallback() {
this.props.didSelect(this.state.selectedHash, this.state.selectedName);
}
handlePredefined(type) {
let newStateHash = [];
let newStateName = [];
switch(type) {
case 'all':
this.props.departments.items.map(department => {
newStateHash.push(department.hash);
newStateName.push(department.name);
});
this.setState({
selectedHash: newStateHash,
selectedName: newStateName
}, () => this.callCallback());
break;
case 'none':
this.setState({
selectedHash: newStateHash,
selectedName: newStateName
}, () => this.callCallback());
break;
}
}
handleDepartment(hash, name) {
if (this.state.selectedHash.length > 0 && this.state.selectedHash.indexOf(hash) > -1) {
let newStateHash = this.state.selectedHash;
let newStateName = this.state.selectedName;
let index = newStateHash.indexOf(hash);
newStateHash.splice(index, 1);
this.setState({
selectedHash: newStateHash,
selectedName: newStateName
}, () => this.callCallback());
}
else {
this.setState({
selectedHash: [...this.state.selectedHash, hash],
selectedName: [...this.state.selectedName, name]
}, () => this.callCallback());
}
}
renderDepartments(department) {
let inSelection = this.state.selectedHash.length > 0 && this.state.selectedHash.indexOf(department.hash) > -1 ? true : false;
return(
<li className={classnames('DEPARTMENTPICKER_department', {active: inSelection})} key={department.hash} onClick={() => this.handleDepartment(department.hash, department.name)}>
<i className={classnames('DEPARTMENTPICKER_icon', 'fa', {'fa-check': inSelection, 'fa-times': !inSelection})} style={{color: department.theme}}></i>
{department.name}
</li>
);
}
render() {
// Notice that here it waits for the end of the api call
if (this.props.departments.isFetching) {return <Loader type='spinner' />;}
return (
<div className='DEPARTMENTPICKER_wrapper'>
<ul className='DEPARTMENTPICKER_predefined'>
<li onClick={() => this.handlePredefined('all')}>All</li>
<li onClick={() => this.handlePredefined('none')}>None</li>
</ul>
<ul className="DEPARTMENTPICKER_departments">
{this.props.departments.items.map(this.renderDepartments)}
</ul>
</div>
);
}
}
function mapStateToProps(state) {
return {
departments: state.departments
};
}
export default connect(mapStateToProps)(DepartmentPicker);
EDIT 2
Because some people are asking about the flow the application is following I decided to include it here:
Parent component renders + API call (triggered by loggin in)
Child component renders (API call still in progress)
API call finishes -> need to create initial state for child component

Answer 1

componentWillMount will fire only one time so setting state over there is not a good idea. But if you want to set state for one time then you can use componentWillMount. otherwise there are three options:
According to the sequence of fire:
1)componentWillReceiveProps, Which will be invoked when props are changed
2)shouldComponentUpdate, this lifecycle function will give permission to render or not by returning true or false.
3)ComponentWillUpdate, this will be fired just before render is called. you can compare new props with old props and setState.

Answer 2

I've had a quick look. Seems you're updating the state in componentDidMount (via didSelectPeriod) in the parent. That's guaranteed unnecessary render. You should be moving that code to
constructor if it is a one time init thing
componentWillReceiveProps to if you want it to be executed when a relevant prop changes.
Now, this way you may or not get rid of the error mesage but there are more apparent issues with your code:
You're trying to render a redux container in a redux container. Well, this is technically doable but very wrong from an architectural perspective and probably the root of your problem. Try to imagine how simple your code would be if you just passed departments to your child components instead of using a connected component. Please refer to smart / dumb components in Redux manual.
componentWillUnmount(){
this.setState({active: ''});
}
This is not needed as a component's state is deleted as it is unmounted.
didSelect={(rawFrom, rawTo) => this.didSelectPeriod(rawFrom, rawTo)} Don't create a function every time you render. Use: didSelect={this.didSelectPeriod} instead. Don't forget to bind in the constructor: this.didSelectPeriod = this.didSelectPeriod.bind(this);
Using redux middleware (thunk, promise) would greatly simplify your API calls.
Try to put more context to your components. Is it a layout, a container or a dumb component? Most of the the time these three are all you need and layout > container > component is your usual render order.