0

Добрый день уважаемые профессионалы! изучаю реакт и никак не могу понять как c помощью map вывести массив Получаю массив:

{"_id": "680rrk5wftyse8c6swl7xsec",
 "header": "заголовок 1",
 "text": "текст 1"},
{"_id": "kswgp8a9l5ihep9rwteaudh1",
 "header": "456",
 "text": "789"},
{"_id": "wttr2awfxvp6sqzdj7rlqq4r",
 "header": "123",
 "text": "123"},
{"_id": "633wit5sjo7t5adm6jii0ugt",
 "header": "Название новости",
 "text": "Текст новости"}

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

class post extends Component {
    render() {
        return (
            <div className="Post">
                <h3>ID</h3>
                <h3>Header</h3>
                <h4>Text</h4>
            </div>
        );
    }
}

2
  • Я так понял Вы разобрались с получением данных, и теперь перешли к рендеру) Приложите код как Вы передаете этот массив в компонент. (ну и отметьте правильный ответ в предыдущем вопросе) Commented 10 февр. 2019 в 8:28
  • так точно) отметил правильный ответ) мои знания react ограничены просмотром нескольких роликов гоши дударя и it kamasutra) Commented 10 февр. 2019 в 9:37

1 ответ 1

0
import React from 'react';

class SomeClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                {
                    "_id": "680rrk5wftyse8c6swl7xsec",
                    "header": "заголовок 1",
                    "text": "текст 1"
                },
                {
                    "_id": "kswgp8a9l5ihep9rwteaudh1",
                    "header": "456",
                    "text": "789"
                },
                {
                    "_id": "wttr2awfxvp6sqzdj7rlqq4r",
                    "header": "123",
                    "text": "123"
                },
                {
                    "_id": "633wit5sjo7t5adm6jii0ugt",
                    "header": "Название новости",
                    "text": "Текст новости"
                }
            ]
        }
    }


    render() {
        const {data} = this.state;
        const Component = this.Child;
        return (<React.Fragment>
                {data.map(element => <Component key={element._id} {...element} />)}
            </React.Fragment>
        );
    }


    Child = ({_id, header, text}) => {
        return (<div className="Post">
            <h3>{_id}</h3>
            <h3>{header}</h3>
            <h4>{text}</h4>
        </div>);
    }
}

export default SomeClass;

Если хотите вынести в отдельный класс, то будет выглядеть так:

class Post extends Component {
    render() {
        const {_id, header, text} = this.props;
        return (
            <div className="Post">
                <h3>{_id}</h3>
                <h3>{header}</h3>
                <h4>{text}</h4>
            </div>
        );
    }
}

Класс обязательно с большой буквы должен называться

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.