Ytukyg

Tried to search for an answer but did not found matching one. I have a problem with my simple React app (contactForm + contacts list). Locally app is not rendering and I got two alerts:

"react.js:20478 Warning: Failed prop type: Invalid prop contact of type string supplied to ContactForm, expected object.
in ContactForm (created by App)
in App"

and

react.js:20478 Warning: Failed prop type: Invalid prop items of type string supplied to Contacts, expected array.
in Contacts (created by App)
in App

What is interesting, alerts shows only locally (I run app with http server). When I upload code on GitHub and run via GitHub Pages (link in repository) - app is rendering and none of alerts occurrs. Can somebody explain this to me?

Files structure - script.js (only rendering App) and components: App, Contact (single contact), Contacts (list of contacts) and ContactForm.

App:

var contacts = [

    {

      id: 1,

      firstName: 'Jan',

      lastName: 'Nowak',

      email: 'jan.nowak@example.com',

    }

    ...

  ];



  var contactForm = {

    firstName: '',

    lastName: '',

    email: ''

  };



  var App = React.createClass({

    render: function() {

      return (

        <div className='app'>

          <ContactForm contact={contactForm}/>

          <Contacts items={contacts}/>

        </div>

      );

    }

  });

Contact:

var Contact = React.createClass({

    propTypes: {

      item: React.PropTypes.object.isRequired,

    },



    render: function() {

      return (

        <div className={'contactItem col-lg-6 col-md-6 col-sm-12'}>

            <div className={'contactImg col-lg-4 col-md-4 col-sm-4'}>

                <img className={'contactImage'} src={'http://icons.veryicon.com/png/System/gCons/contacts.png'}/>

            </div>

            <div className={'contactItem col-lg-6 col-md-6 col-sm-12'}>

                <p className={'contactLabel'}>Imię: {this.props.item.firstName}</p>

                <p className={'contactLabel'}>Nazwisko: {this.props.item.lastName}</p>

                <a className={'contactEmail'} href={'mailto:'+this.props.item.email}>{this.props.item.email}</a>

            </div>

        </div>

        )

    },

  });

Contacts:

var Contacts = React.createClass({

    propTypes: {

      items: React.PropTypes.array.isRequired,

    },



    render: function() {

      var contacts = this.props.items.map(function(contact) {

          return <Contact item={contact} key={contact.id}/>

      });



      return <ul className={'contactList'}>{contacts}</ul>

    }

  });

ContactForm:

var ContactForm = React.createClass({

    propTypes: {

      contact: React.PropTypes.object.isRequired

    },



    render: function() {

      return (

        <form className={'contactForm'}>

          <input type={'text'} placeholder={'Imię'} value={this.props.contact.firstName}/>

          <input type={'text'} placeholder={'Nazwisko'} value={this.props.contact.lastName}/>

          <input type={'email'} placeholder={'E-mail'} value={this.props.contact.email}/>

          <button type={'submit'}>Dodaj kontakt</button>

        </form>

        )

    },

  })

Link to the full code:
https://github.com/galdranorn/react-exercises

@galdranon: I checked out your code and am not getting any errors.

Problem solved: code was OK, but I had cashe issue. Cleaning the browser/ctrl+F5 habit solves the problem.