Объекты

Допустим есть объект items:

var items = [
    {name: "JavaScript"},
    {name: "ES 5"},
    {name: "React"}
]

Добавить данный объект в React-приложение можно в методе constructor(), а вывести на странице можно через метод map().

class Items extends React.Component {
    constructor(props) {
        super(props);
        
        // создание объектов
        this.state = {items: [
            {name: "JavaScript"},
            {name: "ES 5"},
            {name: "React"}
        ]};
    }
    
    render() {
        return (
            <div className="react-app">
                <ul>
                    {this.state.items.map(item => (
                        <li>{item.name}</li>
                    ))}
                </ul>
            </div>
        );
    }
}

// Вывод данных в элементе "#app"
ReactDOM.render(<Items />, document.getElementById("app"));

Объекты надо создавать внутри объекта this.state, т.е. просто задать this.items будет неправильно, т.к. объекты не будут обновляться в приложении.

В результате будет сгенерирован HTML:

<ul>
    <li>JavaScript</li>
    <li>ES 5</li>
    <li>React</li>
</ul>

Пример кода на JSFiddle

Комментарии

Авторизуйтесь, чтобы добавлять комментарии