map() function error. Can this component be further improved

Question

I am new to Javascript and React. This code is showing errors and Can this code be further improved. Any suggestions? Please be abstract I want to implement it.

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>
        );
    }
};

Hemadri Dasari · Accepted Answer · 2018-11-03T19:22:27.653

0

You need to do conditional check before doing .map. Also never forget to add unique key to top element when render them in loop

      {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>
)}

edited Nov 03 '18 at 19:22

answered Nov 03 '18 at 19:13

Hemadri Dasari

32,666
37
119
162

Got it. Thanks. would you pls suggest me as to how can I further improve this component? – akash Nov 03 '18 at 19:22
You are welcome. Few things I described in my answer. Also one more thing You can make this component as stateless component because this component isn’t dealing with state. – Hemadri Dasari Nov 03 '18 at 19:25
yeah, I thought of making this component stateless but can I use propTypes in dumb components too? Thank u so much for helping me. – akash Nov 03 '18 at 19:28
Yes you can. Prop types can be defined for both state full and stateless components. – Hemadri Dasari Nov 03 '18 at 19:31
Take a look at https://stackoverflow.com/questions/44582209/proptypes-in-functional-stateless-component – Hemadri Dasari Nov 03 '18 at 19:32
Thanks! If you still see any way impove this component pls suggest me otherwise Thanks! and have a nice day! – akash Nov 03 '18 at 19:37
That’s pretty much I think. Good day to you too – Hemadri Dasari Nov 03 '18 at 19:40

score 0 · Answer 2 · answered Nov 03 '18 at 19:14

I think Something is problematic with syntax.Try this

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>
        );
    }
}

map() function error. Can this component be further improved

2 Answers2