Вытащить данные и отобразить их в реакции

Question

Я работаю в react и пытаюсь создать страницу для этого веб-приложения, которая отображает данные.
Я даже не смог заставить его отображать данные для этой страницы.

Код, который мне нужно вытащить, взят из веб-ссылки, мне нужно вытащить его и отобразить на карточке с пользовательским интерфейсом материала.

import React, { Component } from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';

const STYLES = {
    card: {
      minWidth: 275,
    },
    //bullet: {
      //display: 'inline-block',
      //margin: '0 2px',
      //transform: 'scale(0.8)',
    //},
    //title: {
      //marginBottom: 16,
      //fontSize: 14,
    //},
    //pos: {
     // marginBottom: 12,
    //},
  };

class ErrorView extends Component{

    constructor(props) {
        super(props);
        this.extractErrorData = this.extractErrorData.bind(this)
    }
    extractErrorData(errorDatas) {
        return errorDatas.map((errorViewData) => {
            <Card>
                <CardContent>
                    {'errorData.project'}
                </CardContent>
                <CardContent>
                    {'errorData.errorText'}
                </CardContent>
            </Card>

        })
    }

     render() {
        const { header, errorViewData } = this.props;
        return (
            <Paper elevation={4} Color='#fff'>
                <Typography variant="headline" component="h3">
                    {header}
                </Typography>
                {this.extractErrorData(errorViewData)}
            </Paper>
         );
    }
}
ErrorView = {
    classes: PropTypes.object.isRequired,
  };

 export default withStyles(STYLES)(ErrorView);

Answer 1

Удалите одинарные кавычки в extractErrorData, если вы хотите показать значения errorData.project и errorData.errorText (и переименовать errorData с errorViewData):

extractErrorData(errorDatas) {
    return errorDatas.map((errorViewData) => {
        <Card>
            <CardContent>
                {errorViewData.project}
            </CardContent>
            <CardContent>
                {errorViewData.errorText}
            </CardContent>
        </Card>

    })
}

Примечание: вы должны добавить JSFiddle или написать что-то еще, чтобы мы лучше поняли, в чем проблема.