score:0

you should just wait until countries is filled before trying to render anything. you can for example render barchart component only if countries array has at least one element :

[...]
{this.state.countries.length > 0 && <barchart 
  start={true}
  data = {this.state.countries}
  len = {this.state.countries[object.keys(this.state.countries)[0]].length}
  keys = {object.keys(this.state.countries)}
  timeout={400}
  delay={100}
  colors = {object.keys(this.state.countries).reduce((res, item) => ({ 
    ...res, 
    ...{ [item]: randomcolor() } 
}), {})}
  labels = {object.keys(this.state.countries).reduce((res, item, idx) => {
    return{
    ...res, 
    ...{[item]: (
      <div style={{textalign:"center",}}>
        <div>{item}</div>
      </div>
      )}
  }}, {})}
  timeline = {array(20).fill(0).map((itm, idx) => idx + 1)}
  timelinestyle={{
    textalign: "center",
    fontsize: "50px",
    color: "rgb(148, 148, 148)",
    marginbottom: "100px"
  }}
  textboxstyle={{
    textalign: "right",
    color: "rgb(133, 131, 131)",
    fontsize: "30px",
  }}
  barstyle={{
    height: "60px",
    margintop: "10px",
    borderradius: "10px",
  }}
  width={[15, 75, 10]}

  maxitems = {this.state.countries.length}

/>}

{this.state.countries.length === 0 && <span>loading...</span>}
[...]

note the conditional rendering syntax.

score:1

i found an issue on your code like in len property of the barchart that gets the error cannot read property 'length' of undefined. after i used null checking with question mark, i am not getting any error but printing 1 to 20. i am not sure it helps you or not. may be after changing that, you will get it solved.

len={this.state.countries[object.keys(this.state.countries)[0]].length}

replaced by

len={this.state.countries[object.keys(this.state.countries)[0]]?.length}

Related Query

More Query from same tag