リアクション：？と：決定をする

Question

いくつかのテキストを編集するためにいくつかの機能を実装しようとしています。

私は状態のオブジェクトのリストを持っています。リストを生成するときに、updateフィールドがfalseまたはtrueであるかどうかを確認する必要があります。

この決定を行うには、おそらく?と:を使用するべきですが、実装方法は不明です。

function AddPerson(props) { 
    return(
     <div> 
      <input type="text" value= {props.newPerson} onChange = {props.handleUpdate}/> 
      <button type="submit" onClick= {props.addNewFriend}> Add New </button> 
     </div> 
    ) 
} 

function Person(props) { 
    return (
     props.listOfPeople.map((person, i) => { 
      // this doesn't work 
      person['update'] 
      ? null 
      : return 
      (
       <li key={i} onClick = {(e) => {props.handleEdit(e, person)}}>{person['name']}</li> 
      ) 
     }) 
    ) 
} 

falseを返すと、<li ..>が返されるように変更する必要がありますか？

function ListPeople(props) { 
    return(
     <div> 
      <ul> 
       <Person listOfPeople = {props.people} handleEdit = {props.edit}/> 
      </ul> 
     </div> 
    ) 
} 

class App extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      newPerson: '', 
      people: [{name:'Eric', update: false} , {name:'Rick', update:false}, {name:'Yoni', update:false}] 
     }; 

     this.handleUpdate = this.handleUpdate.bind(this) 
     this.addNewFriend = this.addNewFriend.bind(this) 
     this.handleEdit = this.handleEdit.bind(this) 
    } 

    handleUpdate(e) { 
     this.setState({newPerson: e.target.value}) 
    } 

    addNewFriend(){ 
     console.log(this.state.newPerson) 
     const newFriendList = this.state.people.slice() 
     this.setState(
      { 
       newPerson: '', 
       people: newFriendList.concat({name:this.state.newPerson, update:false}) 
      } 
     ) 
    } 

    handleEdit(e, person) { 
     console.log(person) 
     return null 

    } 


    render() { 
     return (
      <div> 
       <AddPerson handleUpdate = {this.handleUpdate} addNewFriend = {this.addNewFriend} newPerson = {this.state.newPerson} /> 
       <ListPeople people = {this.state.people} edit={this.handleEdit} /> 
      </div> 
     ); 
    } 
} 

export default App; 

Answer 1

返品を取り除くだけで済みます。このようにしてください

props.listOfPeople.map((person, i) => { 
    return person['update'] ? null : (
    <li key={i} onClick = {(e) => {props.handleEdit(e, person)}}>{person['name']}</li> 
) 
}) 

Answer 2

.mapを使用する場合、返される値はHASです。何も返さない場合は、配列にnull値が返されます。代わりに、あなたは最初にすべきfilterあなたのアレイと、その後はmap実行します。

function Person(props) { 
    return (
     props.listOfPeople.filter(person => person.update).map((person, i) => { 
      return <li key={i} onClick = {(e) => {props.handleEdit(e, person)}}>{person['name']}</li> 
     }) 
    ) 
} 

EDIT：

がperson.updateに基づいて<li>または<input>をレンダリング：

function Person(props) { 
    return (
     props.listOfPeople.map((person, i) => { 
      if(person.update) { 
       return <li key={i}><input /></li> 
      }else { 
       return <li key={i} onClick={ e => props.handleEdit(e, person) }>{person.name}</li> 
      } 
     }) 
    ) 
} 

EDIT 2：

foreachのをループ：

function Person(props) { 
    let people = []; 
    props.listOfPeople.forEach((person, i) => { 
     if(person.update) { 
      people.push(<li key={i}><input /></li>); 
     }else { 
      people.push(<li key={i} onClick={ e => props.handleEdit(e, person) }>{person.name}</li>); 
     } 
    }); 
    return people; 
} 

Answer 3

部品は短絡評価を利用することでレンダリングするか否かを決定するときに、私がで反応使い一つの巧妙なトリック - >

props.listOfPeople.map((person, i) => 
    !person['update'] && 
    <li key={i} onClick = {(e) => {props.handleEdit(e, person)}}>{person['name']}</li> 
);