React - Loop Through an Array - map of undefined

Question

The objective is to show a Picture , Title and Description in the browser.

The Data is in an array

customData.js

import React, {Component} from 'react';

var DATA = [{    
name: 'John Smith',
imgURL: 'http://whiplash.org/imagens-n/temp11/1474940559.jpg',
descricao: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},

{    
name: 'Hugo Seleiro',
imgURL: 'https://static.noticiasaominuto.com/stockimages/1370x587/naom_564bfb7bd7ee7.jpg',
descricao: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}]

module.exports = DATA

This is my Index.js

class App extends Component {


render() {
    return (
        <div>
            <MuiThemeProvider>
                <AppBarExampleIconButton />
            </MuiThemeProvider>
            <div>
                <Profile name={this.props.profileData.name} imgUrl={this.props.profileData.imgURL} descricao={this.props.profileData.descricao} />
            </div>
        </div>
    );
  }

}

ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.contentor'));

This is my Component profile.js

import React, {Component} from 'react';
import DATA from './customData.js';

var Profile = React.createClass({

render: function(){

    //console.log(DATA);

    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6 col-xs-12">
                    <img src={this.props.imgUrl} />
                </div>
                <div className="col-md-6 col-xs-12">
                    <h3>{this.props.name}</h3>
                    <p>{this.props.descricao}</p>
                </div>
            </div>
        </div>
    )
  }
});

export default Profile

If i console.log(DATA) i can se the object in my console, but now i dont know what to do to show the DATA in an Array only if data is a single Object.

Could some one help me ? i already try create a state to not get undefined , but im not understanding , need help !!

Thank You !

I take it of, because i want to make it simple to show my problem !! i realy dont know who to make a map for this case... :( — Hugo Seleiro
– Hugo Seleiro, Commented Sep 29, 2016 at 16:47
i dont know what to do to show the DATA in an Array only if data is a single Object. What do you mean by the above statement. Do you want to map all the profile elements for just one. Its just not clear — Shubham Khatri
– Shubham Khatri, Commented Sep 30, 2016 at 3:07
Hello, it means that i can show the data on the screen if i make my data file like this : DATA = { name: Hugo } , simple object, but if i make it like an array DATA = {[name: Hugo, imgURl: 'image']} i can display the data — Hugo Seleiro
– Hugo Seleiro, Commented Sep 30, 2016 at 7:41

Piotr Berebecki · Accepted Answer · 2016-09-29 16:38:19Z

2

Is this what you are after? http://codepen.io/PiotrBerebecki/pen/qaRNKy

var DATA = [{    
name: 'John Smith',
imgURL: 'http://whiplash.org/imagens-n/temp11/1474940559.jpg',
descricao: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},

{    
name: 'Hugo Seleiro',
imgURL: 'https://static.noticiasaominuto.com/stockimages/1370x587/naom_564bfb7bd7ee7.jpg',
descricao: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}]


class App extends React.Component {
  render() {  
    const data = this.props.profileData.map(function(item, index) {
      return (
        <Profile name={item.name} 
                 imgUrl={item.imgURL} 
                 descricao={item.descricao}
                 key={index} />
      );
    }); 

    return (
        <div>
            {data}
        </div>
    );
  }
}


class Profile extends React.Component {
  render() {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6 col-xs-12">
                    <img src={this.props.imgUrl} />
                </div>
                <div className="col-md-6 col-xs-12">
                    <h3>{this.props.name}</h3>
                    <p>{this.props.descricao}</p>
                </div>
             </div>
        </div>
    );
  }
}


ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.contentor'));

edited Sep 29, 2016 at 16:38

answered Sep 29, 2016 at 16:30

Piotr Berebecki

7,4684 gold badges37 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Piotr Berebecki Over a year ago

I've just edited the answer to map over the this.props.profileData instead of DATA. Does it answer your question?

Hugo Seleiro Over a year ago

Hello, yes it works real nice, the next step is to make an input box to search and display my data !! Thank you very much !!

Collectives™ on Stack Overflow

React - Loop Through an Array - map of undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related