如何使用ES6（react.js）按索引在项目列表中查找对象

Question

I'm new to react and es6 syntax, suppose I have a list of objects like below ( testData.js )

 export const favourites=[ { name: 'Jhon Doe', avatarUrl:require('../../social_app/test/profilePic/17.jpg') }, { name: 'Micheal Douglas', avatarUrl:require('../../social_app/test/profilePic/17.jpg') }, { name: 'Camille la cruz', avatarUrl:require('../../social_app/test/profilePic/17.jpg') }, { name: 'The Rock', avatarUrl:require('../../social_app/test/profilePic/17.jpg') }, { name: 'Daniel lacharmante', avatarUrl:require('../../social_app/test/profilePic/17.jpg') }, { name: 'Alber Weiter', avatarUrl:require('../../social_app/test/profilePic/17.jpg') } ] 

 <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> 

And let say I've imported it into a file, let say test.js , so to use this list I've done

  const favouritePersonList =favouritePersonData.map(person=>{ return <Avatar key={person} avatarurl={person.avatarUrl} style={styles.favouritePersons} height={40} width={40} activity/> }) 

which is suppose to create a List of Avatar component, and put the needed props etc...Now what I would like to do is to render the first object/component in this list. I tried

 render( <div> {favouritePersonList[0]} </div> ) 

But no success, can someone help me ? thanks

As requested please find the full avatar code, kindly note that it is a react native code.

 export default class Avatar extends React.Component { constructor(props){ super(props) this.state={ userState : '#1cdb4c' } } componentWillMount(){ this.props.activity? this.setState({userState:'#1cdb4c'}): this.setState({userState:'#f93434'}) } render() { const {height, width, avatarUrl}=this.props return ( <View style={styles.container}> <View style={[styles.avatarContainer,{height:height,width:width}]}> <Image style={styles.avatarImg} source={avatarUrl} /> </View> <View style={[styles.userActivity,{height:height, width:width}]}> <View style={styles.outer}> <View style={[styles.inner,{backgroundColor:this.state.userState}]}/> </View> </View> </View> ); } } 

Answer 1

It depends on how you want your component to display, but you might use something roughly like this:

render(
  <div>
     {favoritePersonList.map(person => {
       return (
         <div>
           <h1>{person.name}</h1>
           <img src={person.avatarUrl} alt={person.name}/>
         </div>
       )
     })}
  </div>
)

Answer 2

simply use this favouritePersonList instead of this favouritePersonList[0] because you want to render a whole list not just a single element of it so your code will be

render() {
    return  (
      <div>
        {favouritePersonList}
      </div>
    )
}

Edit:

I didn't notice you wanted to render the first element only

The easiest way will be not to use map in the first place

render() {
    return (
      <div>
        {<Avatar avatarurl={favouritePersonData[0].avatarUrl} style={styles.favouritePersons} height={40} width={40} activity/>}
      </div>
    )
}

Answer 3

Think of it like you're just calling JavaScript functions. A for loop would work for you like below:

let avatarRows = [];
for (var i = 0; i < favourites.length; i++) {
    // note: we add a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    avatarRows.push(<Avatar key={favourites[i]} avatarurl={favourites[i].avatarUrl} style={styles.favouritePersons} height={40} width={40} activity/>);
}
return <div>{avatarRows}</div>;

Or

return <div>{avatarRows[0]}</div>;

for the first Avatar component.

Answer 4

render(
  <div>
    {favouritePersonList[0]}
  </div>
)

The code above will try to render an object inside the div which is wrong.

So, the above code will basically look like this:

render(
  <div>
    {
      name: 'Jhon Doe',
      avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    }
  </div>
)

You must do something like

render(
  <div>
    <Avatar key={favouritePersonList[0]} avatarurl={favouritePersonList[0].avatarUrl} style={styles.favouritePersons} height={40} width={40} activity/>
  </div>
)

Answer 5

As I said in the comments, your code works for a simple case. Here it is:

 const favourites = [ { name: "Jhon Doe", }, { name: "Micheal Douglas", }, { name: "Camille la cruz", }, { name: "The Rock", }, { name: "Daniel lacharmante", }, { name: "Alber Weiter", }, ]; const Avatar = props => <div>{props.name}</div>; const App = () => { const favouritePersonList = favourites.map( person => ( <Avatar key={person.name} name={person.name} /> ) ); return <div>{favouritePersonList[ 0 ]}</div>; }; ReactDOM.render( <App />, document.getElementById( "root" ) ); 

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

So, the problem must be somewhere else. Please share us your whole code with the Avatar component.

Update

This is a blind suggestion but in your Avatar component, you are using source={avatarUrl} for the Image . Two problems here.

1. You are not using props. (Sorry, I've seen now, you are destructuring it from this.props . So, just change the destructuring name.
2. You are using the wrong prop name. It should be avatarurl since you are passing it like that in the parent component.

So, try like this:

export default class Avatar extends React.Component {
    constructor(props){
        super(props)
        this.state={
            userState : '#1cdb4c'

        }
    }


    componentWillMount(){
        this.props.activity? this.setState({userState:'#1cdb4c'}): this.setState({userState:'#f93434'})
    }

    render() {
        const {height, width, avatarurl}=this.props
      return (
        <View style={styles.container}>
        <View style={[styles.avatarContainer,{height:height,width:width}]}>
        <Image style={styles.avatarImg} 
        source={avatarurl}

        />
        </View>
        <View style={[styles.userActivity,{height:height, width:width}]}>
        <View style={styles.outer}>
        <View style={[styles.inner,{backgroundColor:this.state.userState}]}/>
        </View>
        </View>
         </View>
      );
    }
  }

Answer 6

 let favouritePersonList = [] favouritePersonData.foreach((person,index)=>{ favouritePersonList[index] = <Avatar key={person} avatarurl={person.avatarUrl} style={styles.favouritePersons} height={40} width={40} activity/> }) 

I think this will work for you, but i cant give you a solid reason why your methid didnt work, i would have to build an example and test it a bit