React development

Hallo
i have html page where in dom content i have this strutcture :

<ul>
<li></li>
<li data-attribure ="" data-color=""></li>
<li data-attribure ="" data-color=""></li>
<li data-attribure ="" data-color=""></li>
</ul>

every li has different data-attributes values .

in react also i have loop inside this loop i have
<ul>
<li></li>
<li data-attribure ="" data-color=""></li>
<li data-attribure ="" data-color=""></li>
<li data-attribure ="" data-color=""></li>
</ul>

for every item in the loop i want to replace its attributes values to be picked from the one in html .