Print JavaScript Object Using React.

This a simple example to print a JavaScript object using react.
let see below simple script.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

let users = [
    {name:'Jone',age:21,email:"jone@test.com"},
    {name:'lisa',age:29,email:"lisa@test.com"},
    {name:'jovi',age:41,email:"jovi@test.com"}
];

class Users extends Component {
       render(){
                   const users = this.props.users;
                   return(
                   <div>
                    {
                       users.map(function(user,i){
                          return (
                              <div key={i}>
                                <p>Name : {user.name}</p>
                                <p>Age : {user.age}</p>
                                <p>Email :{user.email}</p>
                                <p>------------</p>
                              </div>
                           )
                       })
                     }
                    </div>
                  )
               }
          }

ReactDOM.render(<Users users = {users}/>,document.getElementById('content'));

Output :

Name : Jone

Age : 21

Email :jone@test.com

————

Name : lisa

Age : 29

Email :lisa@test.com

————

Name : jovi

Age : 41

Email :jovi@test.com

————

Leave a Reply

Your email address will not be published. Required fields are marked *