How to keep and loop the style of HTML element from an Array in REACT?

Question

I am creating a form builder, so one of my requirements is users should be able to add style. So far these are the options I tried but it's not working

Option 1

State 1

const [myStyle, setStyle] = useState("border: '2px solid red', color: 'yellow'")

Element 1

<div style={{myStyle}}>Hello First Trial</div>

Option 2

state 2

const [myStyle, setStyle] = useState([
     {name: 'border', value:'2px solid red'},
     {name: 'color', value:'yellow'} 
])

Element 2

<div style={{myStyle.map(style=> {
                     return {style.name:style.value}}}>
                    Hello Second Trial
</div>

You need this: jsfiddle.net/76zh9os8 (a style object and style={myStyle}) — user5734311
– user5734311, Commented Jul 8, 2021 at 10:25
Why don't you go with "option 1" but make "myStyle" an object, rather than a string? const [myStyle, setStyle] = useState({ border: '...', color: '...' }) and then <div style={ myStyle }> — secan
– secan, Commented Jul 8, 2021 at 10:25
try this --> myStyle.map(sty => (<div style={sty}>Hello</div>)) — Sarun UK
– Sarun UK, Commented Jul 8, 2021 at 10:25
@SarunUK that will render multiple divs, each with just one rule applied to them. Not what OP wants. — user5734311
– user5734311, Commented Jul 8, 2021 at 10:38

TinsG · Accepted Answer · 2021-07-08 10:36:11Z

2

use this one it works fine

const [myStyle, setStyle] = useState({border: '2px solid red', color: 'yellow'})

and

<div style={myStyle}>Hello First  Trial</div></div>

answered Jul 8, 2021 at 10:36

TinsG

1632 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sarun UK · Accepted Answer · 2021-07-08 11:31:04Z

1

Option 1:-

const [myStyle, setStyle] = useState({border: '2px solid red', color: 'yellow'})

<div style={myStyle}>Hello First  Trial</div></div>

Option 2:-

const [myStyle, setStyle] = useState([
     {name: 'border', value:'2px solid red'},
     {name: 'color', value:'yellow'} 
])

Use reduce method to prepare a single object out of the array.

    <div
    style={myStyle?.reduce((agg, val) => {
      agg[val.name] = val.value;
      return agg;
    }, {})}
  >
    Hello Second Trial
  </div>

Codesandbox - https://codesandbox.io/s/epic-wildflower-sutkr?file=/src/App.js:294-495

answered Jul 8, 2021 at 11:31

Sarun UK

6,7667 gold badges26 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to keep and loop the style of HTML element from an Array in REACT?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related