Вывод блоков с элементами массива

Question

Как вывести каждый элемент массива в блок, чтобы в блоке был только один элемент и число блоков было равно длине массива? пока результат такой:

import React, { Component } from "react"
import classes from "./coursesarray.module.css"
class Coursesarray extends Component {
    render() {
        const array = [{id: "hdj1", content: 1}, {id: "gdr3", content: 2}, {id: "gxn3", content: 3}]
        return (

            <div className={classes.Array}>

                {array.map(item => (

                    <div className={classes.Item} key={item.id}>
                        {item.content}</div>

                ))}
            </div>

        )
    }
}
export default Coursesarray;

.Array {
    position: absolute;
    color: cyan;
    margin-left: 500px;
    margin-top: 400px;
}
.Item {
    border-radius: 20px;
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(34, 34, 34, 0.7);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Результат у вас правильный, только блоки друг на друге (position: absolute).

Можно сделать каждому, например, style top, и встанут рядом.

<style>
    .Array {
        position: absolute;
        color: cyan;
        margin-left: 500px;
        margin-top: 400px;
    }
    .Item {
        border-radius: 20px;
        position: absolute;
        width: 50px;
        height: 50px;
        background: rgba(34, 34, 34, 0.7);
    }
</style>
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script>
const e = React.createElement
const App = () => {
            const array = [{id: "hdj1", content: 1}, {id: "gdr3", content: 2}, {id: "gxn3", content: 3}]
            return e("div",{className:"Array", children: array.map((item,pos) => (
                e("div",{className:"Item", key:item.id, children: item.content, style: { top: (pos*50)+"px" } })
            ))})
}
ReactDOM.render(e(App),document.getElementById("container"))
</script>

БЛОГ НА HUSL

Вывод блоков с элементами массива

Ответы (1 шт):