[Solved]-How can I pass a value from the backend to a React frontend and use that value in the CSS for the frontend?-Reactjs

you can use inline styling where this.state.score will be your value for left property:

style={{ left: `${this.state.score}%` }}

you can use back-ticks to concatenate % string with score value at the end:

<div
  classname={
    !this.state.listening
      ? 'results-container'
      : 'results-container-closed'
  }
>
  <div classname="result-wrapper">
    {this.state.score === ''
      ? 'click record and check your score'
      : 'your score: ' + this.state.score}
  </div>
</div>

<div classname="scale-container">
  <div classname="bar">
    <div classname="arrow-up" style={{ left: `${this.state.score}%` }}></div>
    <div classname="scale-meter"></div>
    <span></span>
  </div>
</div>