How do I set the width of a component in my React web-app based off the output of a variable

Issue

I have a component which I'm attempting to set the width of based off the result of a variable.

The variable returns a number between 1 and 100, and as such I want to set the width to reflect the result of the variable.

However, despite being able to render the result within the component, I can't set the width. This is the first time I've tried to conditionally render the width of a React component before, so figure I'm doing something obvious wrong.

Here's the render function in question:

const fetchLoans = this.state.debts.map(debt => {

      const loanBalance = debt.balance
      const loanBorrowed = debt.borrowed
      const loanSum = Math.round(loanBalance / loanBorrowed * 100)

      return (<div className="individual-loan-amount-outstanding" key={debt._id}>

        <div className="individual-loan-amount-bar">

          <div className="individual-loan-amount-indicator" style={{ width: {loanSum} }}>{loanSum}%</div>

        </div>
        </div>
      )
    })

As you can hopefully see, I'm attempting to set the 'width' based off the result of 'loanSum'.

I can render 'loanSum' in the div, but not with the width.

Can anyone point out where I'm going wrong?

Thanks!

Solution

You shouldn't put the curly brackets around loanSum, so your line should be:

<div className="individual-loan-amount-indicator" style={{ width: loanSum }}>{loanSum}%</div>

Answered By - Anis R.