Объекты

Допустим есть объект 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, index) => (
                        <li key={index}>{item.name}</li>
                    ))}
                </ul>
            </div>
        );
    }
}

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

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

Также стоит обратить внимание, что в тегах <li> добавлен атрибут key. Данный атрибут надо обязательно указывать для элементов массива, т.к. они помогают определять, какие элементы были изменены, добавлены или удалены.

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

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

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

Комментарии

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