undefinedfix
Sign in

How does react transfer data to style

amrobx edited in Wed, 25 Jan 2023

It's hard to make a slot to calculate the percentage and then transfer data to it. I'm totally different from Vue. Vue seems to be {data1}, react seems to be escaping. Try the '+ {data1} +' of JS, No. Write the width: value% as dead. But the percentage is dynamically loaded from JSON, please give us some advice.

Wrong way of writing:

  {data.map(({ id, data1 }) => (
      <div key={id}>
        ...
        <div className={styles.bars} style={{ width: "{ data1 }%" }}></div>
      </div>`
  ))}
2 Replies
E_D
commented on Wed, 25 Jan 2023
style={{ width: data1 + "%" }}

Isn't it good to write like this? It's easy to understand JS

mkysy
commented on Wed, 25 Jan 2023
    style={{ width: `${data1}%` }}

There should be some JS foundation, which has nothing to do with the framework