Через .map() прогнать html

199

13 апреля 2018, 16:44

Читаю документацию по .map() и не могу сообразить, как прогнать html через него. Если что у меня .jsx Может кто подскажет?

<div className="bg"> 
    <div className="dotWrapper dotWrapper-1"> 
        <div className="dot dot-1"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-2"> 
        <div className="dot dot-2"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-3"> 
        <div className="dot dot-3"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-4"> 
        <div className="dot dot-4"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-5"> 
        <div className="dot dot-5"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-6"> 
        <div className="dot dot-6"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-7"> 
        <div className="dot dot-7"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-8"> 
        <div className="dot dot-8"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-9"> 
        <div className="dot dot-9"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-10"> 
        <div className="dot dot-10"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-11"> 
        <div className="dot dot-11"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-12"> 
        <div className="dot dot-12"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-13"> 
        <div className="dot dot-13"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-14"> 
        <div className="dot dot-14"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-15"> 
        <div className="dot dot-15"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-16"> 
        <div className="dot dot-16"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-17"> 
        <div className="dot dot-17"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-18"> 
        <div className="dot dot-18"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-19"> 
        <div className="dot dot-19"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-20"> 
        <div className="dot dot-20"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-21"> 
        <div className="dot dot-21"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-22"> 
        <div className="dot dot-22"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-23"> 
        <div className="dot dot-23"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-24"> 
        <div className="dot dot-24"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-25"> 
        <div className="dot dot-25"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-26"> 
        <div className="dot dot-26"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-27"> 
        <div className="dot dot-27"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-28"> 
        <div className="dot dot-28"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-29"> 
        <div className="dot dot-29"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-30"> 
        <div className="dot dot-30"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-31"> 
        <div className="dot dot-31"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-32"> 
        <div className="dot dot-32"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-33"> 
        <div className="dot dot-33"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-34"> 
        <div className="dot dot-34"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-35"> 
        <div className="dot dot-35"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-36"> 
        <div className="dot dot-36"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-37"> 
        <div className="dot dot-37"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-38"> 
        <div className="dot dot-38"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-39"> 
        <div className="dot dot-39"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-40"> 
        <div className="dot dot-40"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-41"> 
        <div className="dot dot-41"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-42"> 
        <div className="dot dot-42"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-43"> 
        <div className="dot dot-43"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-44"> 
        <div className="dot dot-44"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-45"> 
        <div className="dot dot-45"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-46"> 
        <div className="dot dot-46"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-47"> 
        <div className="dot dot-47"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-48"> 
        <div className="dot dot-48"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-49"> 
        <div className="dot dot-49"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-50"> 
        <div className="dot dot-50"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-51"> 
        <div className="dot dot-51"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-52"> 
        <div className="dot dot-52"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-53"> 
        <div className="dot dot-53"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-54"> 
        <div className="dot dot-54"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-55"> 
        <div className="dot dot-55"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-56"> 
        <div className="dot dot-56"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-57"> 
        <div className="dot dot-57"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-58"> 
        <div className="dot dot-58"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-59"> 
        <div className="dot dot-59"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-60"> 
        <div className="dot dot-60"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-61"> 
        <div className="dot dot-61"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-62"> 
        <div className="dot dot-62"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-63"> 
        <div className="dot dot-63"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-64"> 
        <div className="dot dot-64"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-65"> 
        <div className="dot dot-65"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-66"> 
        <div className="dot dot-66"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-67"> 
        <div className="dot dot-67"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-68"> 
        <div className="dot dot-68"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-69"> 
        <div className="dot dot-69"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-70"> 
        <div className="dot dot-70"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-71"> 
        <div className="dot dot-71"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-72"> 
        <div className="dot dot-72"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-73"> 
        <div className="dot dot-73"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-74"> 
        <div className="dot dot-74"> </div> 
    </div> 
    <div className="dotWrapper dotWrapper-75"> 
        <div className="dot dot-75"> </div> 
    </div> 
</div>

Answer 1

Если я правильно понял, то должно получиться примерно такое:

let data = [1,2,3,4,5,6,7,8,9,10,11,12]
let html = data.map(itemValue => {
  return (
    <div className={`dotWrapper dotWrapper-${itemValue}`}>
      <div className={`dot dot-${itemValue}`}> </div>
    </div>
  )
})