Edit on codepen https://codepen.io/dineshPallapa/pen/mMddbZ

React_parent_children.jsx

class Profile extends React.Component{
  render() {
    let hobbies = this.props.hobbies.map(hobbie => {
      return(
        <li>{hobbie}</li>
      )
    })
    return(
      <div>
        <h3>{this.props.name}</h3>
        <h3>{this.props.age}</h3>
        <ul>{hobbies}</ul>
      </div>
    )
  }
}

class App extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      name:"Dinesh",
      profiles: [
        {name:"dinesh",age :23,hobbies:["Playing cards","Mobile games"]},
        {name:"Virus",age:24,hobbies:["eating","sleeping"]}
      ]
    }
  }
  render() {
    let profiles = this.state.profiles.map(profile => {
      return(
        <Profile name={profile.name}
                 age={profile.age}
                 hobbies={profile.hobbies}
          />
      )
    })
    return (
      <div>
        {profiles}
        <Profile name={"dinesh"} age={20} hobbies={["eating","drinking"]} />
      </div>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);