CODEWITHSUNDEEP
javascriptcssreactjs
Johan Jönsson
Johan Jönsson

Reputation: 569

React set background color with state rgb

so i am generating out a table based on results from my database and in my database i keep rgb values asfor ex 75,75,75 and now when i generate my list i would like to set the beckground of my td using that saved valued

     <tbody>

       {this.state.boxes.map((box, i) =>
        <tr>
        <td>{box.name}</td>
        <td>{box.weight}</td>
        <td style={{background: "rgb("+{box.color}+")"}}>{box.color}</td>
        <td>{box.multiplier}</td>
        </tr>)}
  </tbody>

this does not work but kind of shows what i want to do. i just want to background of each generated element to be the box.color value that is for ex 75,75,75. is there anyway of doing this?

this is the object structure

color: "138,82,82"
​​
multiplier: 4
​​
name: "Johan"
​​
weight: 14

Upvotes: 3

Views: 20325

Answers (2)

Nishant Dixit
Nishant Dixit

Reputation: 5522

Just do without {} this. 

   <tbody>

       {this.state.boxes.map((box, i) =>
        <tr>
        <td>{box.name}</td>
        <td>{box.weight}</td>
        <td style={{background: "rgb("+box.color+")"}}>{box.color}</td>
        <td>{box.multiplier}</td>
        </tr>)}
  </tbody>

Upvotes: 0

supra28
supra28

Reputation: 1636

You can use a template literal notation like this:

<tbody>
          {this.state.boxes.map((box, i) => (
            <tr>
              <td>{box.name}</td>
              <td>{box.weight}</td>
              <td style={{ background: `rgb(${box.color})` }}>{box.color}</td>
              <td>{box.multiplier}</td>
            </tr>
          ))}
        </tbody>

Upvotes: 6

Related Questions