add-person-details.md

Add a person details component (with children)

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

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

</div>;

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 this.state.people.map( ( person, index ) =>

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

    );

  }
  render() {

      return <section className="people">

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

      </section>;

  }

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>
    <ul>

      {saved.map( person =>

        <PersonDetails person={person} />

      )}

  </ul>

</section>;

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() {

    super();
    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>
        </header>
        <p className="App-intro">

          <iframe width="560" height="315" src="https://www.youtube.com/embed/KY0TZQTwwbk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

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

      </div>
    );
  }