1人のユーザーの代わりに1人のユーザー情報のリストで4つのコンポーネントを表示する

Question

私はユーザーのリストを使ってビルドしているアプリケーションを持っています。私はユーザーArrayを介してマップし、クリックすることができるように各ユーザーの名前を表示することができます。私は、そのコンポーネントがユーザの情報をレンダリングするはずの "UserCard"コンポーネントに小道具を渡します。

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

class UserList extends Component{  
render(){ 
    return(
     <ul className='nav nav-tabs nav-justified'> 
      {this.props.People.map(person => { 
       return <User 
        users={person} 
        key={person.Id} 
        {...this.props} 
       /> 
      })} 
     </ul> 
    ) 
} 
} 

export default UserList; 

：これは一意に起こっとうまく働いている、しかし、ユーザーが

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

class User extends Component{ 
onClick(e){ 
    e.preventDefault(); 
    const {updateUserId, user} = this.props; 
    updateUserId(user); 
} 
render(){ 
const {user, activeUser, userIdToShow} = this.props; 
const active = user === activeUser ? 'active' : ''; 

return(
    <li className={active} role='presentation'> 
     <a onClick={() => this.props.updateUserId(this.props.users.Id)}> 
      {this.props.users.Name} 
     </a> 
     {userIdToShow ? <UserCard 
      key={this.props.users.Id} 
      user={this.props.People[userIdToShow-1]}/> : null} 
    </li> 
    ) 
    } 
} 

export default User; 

とユーザーリスト（親compenent）は次のようになります（な長さの配列の）4回表示されていますどんなフィードバックも高く評価されます。私はJSBinやFiddleで自分のアプリを手に入れようとします。前もって感謝します！あなたはこの試みることができる

Answer 1

：

class User extends Component{ 
     // 1. use a state to show/hide user 
     constructor(props){ 
      super(props); 
      this.state = {show:false}; 
     } 
     // 2. add a show user that will be called in on-click 
     showUser(){ 
      this.setState({show:true}); 
     } 

     return(
     <li className={active} role='presentation'> 
     // 3. update the state of show in on-click 
     <a onClick={() => this.props.updateUserId(this.props.users.Id);this.showUser();}> 
      {this.props.users.Name} 
     </a> 
     // 4. use state to display the user card 
     {this.state.show ? <UserCard 
     key={this.props.users.Id} 
     user={this.props.People[userIdToShow-1]}/> : null} 
    </li> 
    ) 
    } 
} 

Answer 2

を私は単に私のコードに次のようにして、これを解決：

return(
    <li className={active} role='presentation'> 
    <a onClick={() => this.props.updateUserId(this.props.users.Id)}> 
     {this.props.users.Name} 
    </a> 
    {userIdToShow ((I had no check against the "Clicked on User's ID here))? <UserCard 
     key={this.props.users.Id} 
     user={this.props.People[userIdToShow-1]}/> : null} 
    </li> 
) 

を私は何のチェックがなかったので、それはしてカードを4回レンダリングしますそれと同じプロパティ。私はこれをする必要があった

return(
    <li className={active} role='presentation'> 
    <a onClick={() => this.props.updateUserId(this.props.users.Id)}> 
     {this.props.users.Name} 
    </a> 
    {userIdToShow === this.users.props.Id ? <UserCard 
     key={this.props.users.Id} 
     user={this.props.People[userIdToShow-1]}/> : null} 
    </li> 
) 

それは魅力的なように働いた。