Ошибка функции map (). Можно ли улучшить этот компонент?

Question

Я новичок в Javascript и React. Этот код показывает ошибки и может ли этот код быть дополнительно улучшен. Какие-либо предложения? Пожалуйста, будьте абстрактны, я хочу это реализовать.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

export class Projects extends Component {
    static propTypes = {
        projects: PropTypes.array.isRequired
    };

    render() {
        const { projects } = this.props;

        return (
            <div className="projects container">
                <Link to="/projects/new" className="btn">
                    New project
                </Link>

                {projects.map(project => (
                    <div>
                        <span className="language origin">
                            {project.languageFrom}
                        </span>
                        <span className="language destination">
                            {project.languageTo}
                        </span>
                    </div>
                )}
            </div>
        );
    }
};

Answer 1

Я думаю, что-то проблематично с синтаксисом. Попробуйте это

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

export class Projects extends Component {
    static propTypes = {
        projects: PropTypes.array.isRequired
    };

    render() {
        const { projects } = this.props;

        return (
            <div className="projects container">
                <Link to="/projects/new" className="btn">
                    New project
                </Link>

                {projects.map(project => (
                    <div>
                        <span className="language origin">
                            {project.languageFrom}
                        </span>
                        <span className="language destination">
                            {project.languageTo}
                        </span>
                    </div>
                ))}
            </div>
        );
    }
}

Answer 2

Вы должны сделать условную проверку перед выполнением .map. Также никогда не забывайте добавлять уникальный ключ к верхнему элементу при рендеринге их в цикле

      {Array.isArray(projects) && projects.map((project,index) => (
  <div key={"Key-"+index}>//or if each project contains unique I’d then add id as key instead of index like key={project.id}
    <span className="language origin">
      {project.languageFrom}
    </span>
    <span className="language destination">
      {project.languageTo} 
    </span>
  </div>
)}