gistfile1.txt

import React from 'react';

import './navigation-bar.css';

export default function NavigationBar(props){
  const links = props.links.map((link, index) => (
    <li key={index}>
      <a href={link.href}>
        {link.text}
      </a>
    </li>
  ));
  
  return (
    <div className="navigatio-bar">
      <h1>{props.title}</h1>
      <nav className="navigation-bar-nav">
        <ul>
          {links}
        </ul>
      </nav>
    </div>
  );
};

NavigationBar.defaultProps ={
  href:"",
  text:""
}


SECOND EXERCISE:

contact.js:

import React from 'react';

import './contact.css';

export default function Contact(props) {
    return (
        <div id={`contact-${props.index}`} className="contact">
            <img className="contact-photo" src={props.photo} alt={`${props.name}${props.name.slice(-1) === 's' ? "'" : "'s"} avatar`}  />
            <h2 className="contact-name">
                {props.name}
            </h2>
            <div className="contact-address">
                {props.address}
            </div>
        </div>
    );
}

AAAAAAAND ADDRESSS BOOK
-this is where the information is provided as state, and then a new cont is created in the render function, and the information provided
  is run through the imported CONTACT class from card.js. Final product is returned as a result of the rendered method

import React from 'react';

import './contact.css';

export default function Contact(props) {
    return (
        <div id={`contact-${props.index}`} className="contact">
            <img className="contact-photo" src={props.photo} alt={`${props.name}${props.name.slice(-1) === 's' ? "'" : "'s"} avatar`}  />
            <h2 className="contact-name">
                {props.name}
            </h2>
            <div className="contact-address">
                {props.address}
            </div>
        </div>
    );
}