[Solved]-How to keep and loop the style of HTML element from an Array in REACT?-Reactjs

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

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>