Issue with props in react.js

Question

I am new to react. I am working on building a simple contact list application to display the contact's name, email and we will store a catchphrase of a contact. We will make use of this , it contains a JSON dump of data needed for our contact list application. I have 2 files statushelper.js and shapes.js

Below is the statushelper.js

import React, {Component} from 'react';
import Shapes from './Shapes';

class StatusHelper extends Component {
    constructor() {
        super();

        this.state = {
            contacts: []
        };
    }
    componentDidMount() {
        fetch('http://jsonplaceholder.typicode.com/users')
            .then(res => res.json())
            .then((data) => {
                this.setState({contacts: data})
            })
            .catch(console.log)
    }
    render () {
        return (
            <Shapes contacts={this.state.contacts} />
        );
    }
}

export default StatusHelper;

Shapes.js

import React from 'react'

const Shapes = ({ contacts }) => {
    return (
        <div style={{text_align: 'center'}}>
            <h1>Contact List</h1>
            {contacts.map((contact) => (
                <div className="card">
                    <div className="card-body">
                        <h5 className="card-title">{contact.name}</h5>
                        <h6 className="card-subtitle mb-2 text-muted">{contact.email}</h6>
                        <p className="card-text">{contact.company.catchPhrase}</p>
                    </div>
                </div>
            ))}
        </div>
    )
};

export default Shapes

When I run statushelper.js file I am running into the following errors

'contacts' is missing in props validation                react/prop-types
 Missing "key" prop for element in iterator               react/jsx-key

any suggestions?

Answer 1

You are rendering an array of elements, so React needs a key prop.

Add index to your mapping and key={index} to your div "card". Like that:

const Shapes = ({ contacts }) => {
    return (
        <div style={{text_align: 'center'}}>
            <h1>Contact List</h1>
            {contacts.map((contact, index) => (
                <div className="card" key={index}>
                    <div className="card-body">
                        <h5 className="card-title">{contact.name}</h5>
                        <h6 className="card-subtitle mb-2 text-muted">{contact.email} 
                        </h6>
                        <p className="card-text">{contact.company.catchPhrase}</p>
                    </div>
                </div>
            ))}
        </div>
    )
};

Answer 2

These are not errors but simply warnings. To fix these warnings. Do the following:

1) You are missing prop types that's why you have the first error.

Do this in shapes.js :

import PropTypes from 'prop-types';

// Component declaration

Shapes.propTypes = {
    contacts: React.PropTypes.arrayOf(React.PropTypes.shape({
      name: React.PropTypes.string,
      email: React.PropTypes.string,
      company: React.PropTypes.shape({
          catchPhrase: React.PropTypes.string
      })
   }))
};

2) You're missing key in your map function which react uses for optimisation : Just change

{contacts.map((contact) => (
                <div className="card">

to

{contacts.map((contact, index) => (
                <div className="card" key={index}>