Keine Render-Daten mit Requisiten übergeben

Question

Ich habe ein Problem mit Daten-Rendering durch Übergabe von Daten von einer Komponente zur anderen. Ich die Daten korrekt von einer Komponente zur anderen anzeigen, aber dann in der Lage bin ich nicht

die Daten korrekt

Root-Komponente

<SelectContainer type={3} data={this.props.templates}/> 

Kinder Komponente

import React from 'react'; 
const SelectContainer = ({type, data}) => { 
let option = []; 

if (type === 1) { 
    option.push(<option value="#" key={0}>Grant</option>)    
}else if (type === 2) { 
    option.push(<option value="#" key={0}>1</option>);   
    option.push(<option value="#" key={1}>2</option>); 
    option.push(<option value="#"key={2}>3</option>);   
} 
else if (type === 3) {   
    for (let i = 0; i <= data.length; i++) { 
     // console.log(i); 
     option.push(<option key={i+1} value={data.descTemplate}> 
      {data.descTemplate}</option>);     
    } 
} 
return (
    <select className="selectContainer"> 
     {option.map((item) => { 
      console.log(item) 
      return item 
     })} 
    </select> 
); 
} 

export default SelectContainer; 

Die img Show console.log ziehen an return()

Das Element select gibt die Daten, die ich für die Eigenschaften des übergeordneten Elements sende, nicht wieder Komponente. Die Konsole.log druckt mich, was ich im Bild anstelle der Daten zeige

Answer 1

Ich habe nichts falsch gefunden. Es funktioniert gut. Bit geändert Schnipsel:

const SelectContainer = ({type, data}) => { 
 
    let option = []; 
 
    for (let i = 0; i < data.length; i++) { 
 
    option.push(<option key={i+1} value={i+1}>{data[i].desc}</option>)    
 
    } 
 

 
    return (
 
     <select className="selectContainer"> 
 
      {option.map((item) => { 
 
       return item; 
 
      })} 
 
     </select> 
 
); 
 
} 
 

 
const templates = [ 
 
    { 
 
     desc: 1 
 
    }, 
 
    { 
 
     desc: 2 
 
    }, 
 
    { 
 
     desc: 3 
 
    } 
 
] 
 
ReactDOM.render(
 
    <SelectContainer type={3} data={templates}/>, 
 
    document.getElementById('app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

Ich glaube, sie ist etwas falsch mit Ihrem data.descTemplate.