Step 2
Create a file CreateMeeting.js
with the following content:
function CreateMeeting() {
return <div>Create Meeting</div>;
}
export default CreateMeeting;
Update ListMeetings.js
to include a link to navigate to "create meeting" view!
<div className="list-meetings-top">
<Search query={this.state.query} updateQuery={this.updateQuery} />
+ <a href="/create" className="add-meeting">Add Meeting</a>
</div>
Add the following styling to ListMeeting.css
.add-meeting {
display: block;
width: 73px;
background: white;
background-image: url("./icons/add.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 28px;
font-size: 0;
}
Save the file and revisit the app in your browser. Notice the icon added to the search bar!
Click on the icon; although the URL changes to http://localhost:3000/create, the view does not change!