passing data between components reactjs

Question

I am new in reactjs, i am creating a demo project using reactjs. In my app i have problem while showing the data in screen. here is my code

import React, {Component} from 'react';
import $ from 'jquery'; 
import Users from './userlist';
export default class Home extends Component {
 constructor(props) {
    super(props);

    this.state = {person: []};
  }

  componentDidMount() {
    console.log("componentDidMount")
    this.UserList();
  }

  UserList() {
    return $.getJSON('/react/getUsers')
      .then((data) => {
        this.setState({ person: data.data });
      });
  }

  render() {
   return (
     <div>
          <Users getUserData = {this.state.person}></Users>
     </div>

    )  
  }
}

Home.contextTypes = {
  router: React.PropTypes.object.isRequired,
}

In this am calling the component Users

Here is the users component file:

import React, {Component} from 'react';
import $ from 'jquery'; 
export default class Users extends Component {
   render() {
    console.log(this.props.getUserData)// contains array of objects which am wants to show
   return(

          <div className="experience-item">
            <div className="experience-content experience-color-blue">
              <h4>value should be here</h4>
              <h6>value should be here</h6>
              <p>value should be here</p>
            </div>
          </div>
    )   
  }
}  

Answer 1

You forgot to bind UserList method in the constructor

constructor() {
  this.state = { person: [] }
  this.UserList = this.UserList.bind(this)
}

As soon as you get the result, simply map through it. (I'm also assuming that person has at least id and name properties)

{this.props.getUserData.map(user => <div key={user.id}>{user.name}</div>)}

Answer 2

Try following.
1. Render Users only when you have data, so

import React, {Component} from 'react';
import $ from 'jquery'; 
import Users from './userlist';
export default class Home extends Component {
 constructor(props) {
    super(props);

    this.state = {person: []};
  }

  componentDidMount() {
    console.log("componentDidMount")
    this.UserList();
  }

  UserList() {
    return $.getJSON('/react/getUsers')
      .then((data) => {
        this.setState({ person: data.data });
      });
  }

  render() {
   return (
     <div>
       {
         (this.state.person && this.state.person.length) ? <Users getUserData = {this.state.person} /> : ""
       }
     </div>

    )  
  }
}

Home.contextTypes = {
  router: React.PropTypes.object.isRequired,
}

2. Iterate user to display data in Users Component
   

    export default class Users extends Component { render() { return( <div> { this.props.getUsersData.map((user, index) => { return ( <div> <div className="experience-item"> <div className="experience-content experience-color-blue"> <h4>{user.name}</h4> <h6>{user.details}</h6> <p>{user.content}</p> </div> </div> ) }) } <div> ) }