複数のアイテムをループしてそれぞれをレンダリングする

Question

私の頭をラップするのに問題があります。ここに私が持っているものがありますが、それは働いていません。私が間違ってやっていることについてのいくつかの指針と、それを実行するためのより良い方法がありがとう、ありがとう！

const users = [ 
    { 
     "firstName": "John", 
     "lastName": "Doe" 
    }, { 
     "firstName": "Anna", 
     "lastName": "Smith" 
    }, { 
     "firstName": "Peter", 
     "lastName": "Jones" 
    } 
]; 

function Welcome(props) { 
    return <h1>Hello, {props.firstName} {props.lastName}</h1>; 
} 

function allUsers(){ 
    return (
     <div> 
      {for(var i=0; i<users.length; i++){ 
       <Welcome firstName={users[i].firstName} lastName={users[i].lastName}/> 
      }} 
     </div> 
    ) 
} 

ReactDOM.render(
    allUsers(), 
    document.getElementById('root') 
); 

Answer 1

forループの代わりに.mapを使用してください。それは、コードの大きな壁がありませんので、また

const users = [ 
 
    { 
 
     "firstName": "John", 
 
     "lastName": "Doe" 
 
    }, { 
 
     "firstName": "Anna", 
 
     "lastName": "Smith" 
 
    }, { 
 
     "firstName": "Peter", 
 
     "lastName": "Jones" 
 
    } 
 
]; 
 

 
function Welcome(props) { 
 
    return <h1>Hello, {props.firstName} {props.lastName}</h1>; 
 
} 
 

 
function allUsers(){ 
 
    return (
 
     <div> 
 
      {users.map(function(user) { 
 
       return <Welcome key={user.firstName} firstName={user.firstName} lastName={user.lastName}/> 
 
      })} 
 
     </div> 
 
    ) 
 
} 
 

 
ReactDOM.render(
 
    allUsers(), 
 
    document.getElementById('View') 
 
);

<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="View"></div>

Answer 2

、あなたは「やってのより良い方法をお見せするためにコード全体を書き換えるために、私は許さ自分自身をES6を使用している：それはで使用するために、通常は簡単ですが反応しますそれ"。

const users = [ 
    { 
     "firstName": "John", 
     "lastName": "Doe" 
    }, { 
     "firstName": "Anna", 
     "lastName": "Smith" 
    }, { 
     "firstName": "Peter", 
     "lastName": "Jones" 
    } 
]; 

const Welcome = ({firstName, lastName}) => <h1>Hello, {firstName} {lastName}</h1>; 

const AllUsers =() => (
     <div> 
      { 
      users.map((user, key) => <Welcome key={key} firstName={user.firstName} lastName={user.lastName} />) 
      } 
     </div> 
) 

ReactDOM.render(
    <AllUsers />, 
    document.getElementById('root') 
);