Skip to content

Instantly share code, notes, and snippets.

What would you like to do?

Add a person details component (with children)

const PersonDetails = ( { person, children } ) => <div className="person-details">

  <p className="name">{} {person.surname}</p>
  <p><span className="label">Region</span>{person.region}</p>
  <img src={} />


Pass the list of people to the Person Details component

This code goes into your People component:

  renderLoading() {

    return <div>Loading...</div>;

  renderData() {

    const handleSave = this.props.handleSave;
    return ( person, index ) =>

      <PersonDetails key={index} person={person}>
        // Save button will go here


  render() {

      return <section className="people">

          <button onClick={() => this.callAPI()}>Generate</button>
        {this.state.people ? this.renderData() : this.renderLoading()}



Add the save button

This goes into your Person component's renderData function

    <p><button onClick={() => handleSave(person)}>Save</button></p>

Add the "Saved for later" component

const ForLater = ( { saved } ) => <section className="for-later">

    <h3>Saved "for later"</h3>

      { person =>

        <PersonDetails person={person} />




Use the ForLater component from your App component

This goes into the render method of your App component

        <ForLater saved={this.state.saved} />

Update your App component to store the saved list:

Add a constructor:

  constructor() {

    this.state = { saved: [] };


Add the handleSave method:

  handleSave( person ) {

    const saved = this.state.saved;
    saved.push( person );
    this.setState( { saved } );


Pass the handleSave method to the People component (in your render method):

        <People handleSave={person => this.handleSave( person )} />

so the full render method should look something like this:

render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        <p className="App-intro">

          <iframe width="560" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        <ForLater saved={this.state.saved} />
        <People handleSave={person => this.handleSave( person )} />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.