2

I'm creating a skills chart in a React component, where each bar starts with a short width and then it expands to a specified width after 0.5 second. The width is related to the skill level, defined in the following array:

const skills = [
  { skillName: 'JavaScript', level: 10, color: 'bca538' },
  { skillName: 'HTML', level: 9, color: 'af4336' },
  { skillName: 'CSS', level: 9, color: '2f81b7' },
]

The chart is represented in the following code:

<div className="chart__bars">
  {skills.map((skill, index) => {
    const { skillName, level, color } = skill
    const { scale } = this.state

    return (
      <div
        className={'chart__bars__item'}
        key={skillName}
        style={{
          background: `#${color}`,
          height: `${(100 / skills.length) * (index + 1)}%`,
          width: `${scale ? level * 10 : 30}%`,
          zIndex: skills.length - index,
        }}
      >
        <h4
          style={{
            opacity: `${scale ? 1 : 0}`,
          }}
        >
          {skillName}
        </h4>
      </div>
    )
  })}
</div>

After the component is mounted, it triggers a state change after 0.5 second, which should then expand each bar (logic for this is inside the style property in the code above). Here's the initial state:

state = {
  scale: false,
}

And here's where I change it:

componentDidMount() {
  setInterval(() => {
    this.setState({ scale: true })
  }, 500)
}

It works fine on the browser, but not on mobile. Using the devtools I can see the width being updated, but it won't expand. If I uncheck the tick box for the width, and then check it again, then the width expands (which should happen automatically).

The working example is on my website: https://marcelcruz.io.

Any thoughts would be much appreciated! Thanks.

Marcel Cruz
  • 59
  • 7
  • I think you need to add an event listener for window size change. This might help? https://stackoverflow.com/questions/19014250/rerender-view-on-browser-resize-with-react – Electron Sep 08 '18 at 08:18
  • Unfortunately that's not the case. When the page loads on the phone, there's no resizing happening. But thanks! – Marcel Cruz Sep 11 '18 at 07:10

0 Answers0