How can I loop an array in the inline style in jsx?

Question

Here is the partial code:

let entries = Object.entries(customStyles);
       <div
        style={[...this.entries].map((item, i) => {
          return item[0] + ': ' + item[1] + ',';
        })}
        onClick={() => this.toggleDropdown(toggled)}
      >
        {selected.label}
      </div>

My question is: customStyles is an object such as

customStyles: {
    background: '#14c944',
    color: '#1231e0',
  }

I converted the object to an array first and I want to use a map to loop the array in the inline style. But this way doesn't work. How can I loop an array in the inline style in jsx?

Answer 1

I don't understand why you would do that, but if it is important for your project you could try save the loop in a variable and aply Object.fromEntries inside the style property.

Like this:

let entries = Object.entries(customStyles).map((item, i) => {
        return [item[0], item[1]];
    })  

    return (
        <div>
            <p style={Object.fromEntries(entries)}>Example</p>            
        </div>
    );

But if this loop is not crucial you could style your elements inside the style property.

return (
        <div>
            <p style={{background: '#14c944', color: '#1231e0'}}>Example</p>          
        </div>
    );

Or just use the spread operator:

const customStyles = {
        background: '#14c944',
        color: '#1231e0',
    } 

    return (
        <div>
            <p style={{...customStyles}}>Example</p>           
        </div>
    );