Avertissement: Propriété inconnue sur <>. Retirer ce prop de l'élément

Question

Je suis nouveau à réagir et j'apprenais des sous-classes à partir d'un des exemples de Lynda. Je crée une nouvelle classe de sous-composant appelée aptList et en utilisant this.props.eachItem.ownerName pour parcourir chaque index du fichier JSON où ownerName est une propriété.

C'est l'erreur que je reçois lorsque je l'exécute dans le navigateur. Les données se tiré par les cheveux, mais le prop ne reçoit pas reconnu selon l'erreur

cependant REACT semble console à obtenir le JSON bien

Ceci est le code tel qu'il est enseigné sur Lynda

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var createReactClass = require('create-react-class'); 

var aptList = createReactClass({ 
render: function(){ 
    return(
     <li>{ this.props.eachItem.ownerName }</li> 
    ); 
} 
}); 


var MainInterface = createReactClass({ 

    getInitialState: function(){ 
     return { 
     title: 'Items', 
     show: function(x){ 
      if(x>10){ 
       return true 
      } 
      else { 
       return false 
      } 
     }, 
     myData: [] 
    } 
}, 

componentDidMount: function(){ 

    this.serverRequest = $.getJSON('static/scripts/src/myData.json', function(results){ 
     var tempData = results; 
     this.setState({ 
      myData: tempData 
     }); 
    }.bind(this)); 
}, 


componentWillUnmount: function(){ 
    this.serverRequest.abort(); 
}, 

render: function(){ 

    var style = { 
     color: 'red', 
     fontWeight: 900 
    }; 

    var reactData = this.state.myData; 
    reactData = reactData.map(function (each, index) { 
     return (
      <aptList eachItem = { each } 
        key = { index }/> 
     ) 
    }.bind(this)); 

    return (
     <div> 
      <h1>{ this.state.show(12) ? 'List of ':null }{ this.state.title }</h1> 
      <ul style={style}> 
       { reactData } 
      </ul> 
     </div> 
     ) 
    } 
}); 

ReactDOM.render(
    <MainInterface/>, 
    document.getElementById('testid') 
); 

Answer 1

Rename aptList à AptList.

Sinon, React considère aptList comme étant un composant html natif et déclenchera des avertissements pour les propriétés HTML inconnues.

Voir la link dans le message d'exception:

4. Vous utilisez un composant React sans majuscules. React l'interprète comme une balise DOM parce que ...