So I have been diving into many tutorials. Many of them however do the same things using different methods. Often times I am finding myself learning something, just to find out from another tutorial that way I was practicing is either depreciated or not considered best practice. I have become stuck in certain areas of understanding.
The example code below, I designed it in a way that would allow me to fully understand certain concepts once I am able to see how someone else converted my “thought pattern” into a functional app while making it easy for someone to see what I was attempting to do. However, this will only work if the provided example is utilizing the latest best practices in React, ES6(especially arrow functions), and JSX. Some of the code is incomplete and this is on purpose.
Also, I am not currently sure what I want to do when the form is submitted. I am thinking of just passing the data to a php file that parses the data and emails the information. (I know how to create the PHP file, just not sure how to send the data from React)
Purpose of Code: Allow user to browse and add contacts but only show the details for one contact at a time. Do not list the other contacts, but provide the ID of the currently displayed contact and show the total count of contacts.
1. Display form fields that data can be entered into (ie: First Name, Last Name, Age)
2. Upon first Page Load show the current contact showing as “contact 1” with default values in the form fields
3. Allow user to click on “Add Contact” to create a new contact
4. Allow user to browse contacts by clicking on “Previous Contact” and “Next Contact”
5. Allow user to edit the details of any given contact
6. Allow user to delete contacts, but never allow 0 contacts
7. Form Data is never Saved to a db or submitted unless the user clicks on “Submit Contact Details”, meaning all the contact information stays local to the user until they submit the form.
Functionality Goals:
1. Clicking “Add Contact” should save any details about the currently selected contact being displayed and also create a New Contact record
2. Clicking “Add Contact” should change the currently selected contact to the new contact, so the the fields should be prepopulated with default data, allowing the user to now enter information for the new contact
3. When browsing contacts, if you modify a field and click on “Next Contact” or “Previous Contact”, the current information should be saved. This way the user can browse the contacts without losing any modified data
4. Submitting the form should prepare the data to be submitted to a parser. I am thinking possibly encoded in JSON and have it POST to a php script that parses the information but to be honest I am not sure the best method. (I know how to create the PHP side, it’s just this react/js side that has me baffled.)
'use strict';
import React from 'react';
import _ from 'lodash';
export default class ContactSelector extends React.Component {
// Have been reading on this but this still confuses me a bit.
constructor(props){
// Have been reading on this but this still confuses me a bit.
super(props);
// My attempt to create a contactDetails object
// which contains the following default properties in order for me for to call back individual pieces of information
// ie: this.contactDetails.contactID or this.contactDetails.lastname
// I declared the value of the variables below so there are pre-defined values upon page load
this.contactDetails = {
'contactID': 1, //This is so the first contact is initialized/referenced upon the first page load
'firstName': "Unknown First Name", // Default value displayed for Contact 1
'lastName': "Unknown Last Name", // Default value displayed for Contact 1
'age': 0, // Default value displayed for Contact 1
'contactType': null, //Options should be "Family, Work, Friends"
'additionalOptions': null //This code is not writtent yet, but it would include other data
};
// The page only shows the details of "1" contact at a time.
// I am using the "state" because it my understanding that it re-renders the dom with updated information when things change.
this.state = {
// However when someone clicks on the "Previous Contact" or "Next Contact" button/link,
// it will change the state of the "selectedContact" so relevant information appears for the currently selected contact
selectedContact: 1,
// My idea here is to initially load the page with only "1 Contact", while using the contactDetails above for that contact.
// Also trying to find a simple way of displaying the "amount of contacts"
contactCount: 1
};
}
// Currently what this does is if anyone clicks on the "Add Contact" button/link,
// it will increase the number both the "contactCount" and also the "selectedContact"
// Basically the web page will show "Contact: 1 / 1", the first number being the "Currently selected Contact" and the 2nd number being "Total Contacts"
// Adding a contact will update the web page to show "Contact: 2 / 2"
addContact(){
this.setState({ contactCount: this.state.contactCount +1, selectedContact: this.state.contactCount +1});
}
// Clicking on the "Next Contact" link will take you to the next contact
// Basically below just says only go to next contact if the "selected contact" number is a number greater than the "contact count"
nextContact(event){
if(this.state.selectedContact < this.state.contactCount) {
this.setState({ selectedContact: this.state.selectedContact + 1 });
}
}
// Clicking on the "Previous Contact" link will take you to the previous contact
// Basically below just says only go to previous contact if the "selected contact" number is currently greater than 1
prevContact(event){
if(this.state.selectedContact > 1) {
this.setState({ selectedContact: this.state.selectedContact - 1 });
}
}
render (){
return (
<div className="BlackBox BlueBox AllFifteenRounded" id="ContactSelector">
<div className="Options clearfix">
<div className="floatLeft">
<div className="ContactNumberBg">
// On first page load this will render as 1 / 1
<div id="ContactNumber">{this.state.selectedContact} / {this.state.contactCount}</div>
</div>
// Clicking this will increase the contactCount and change the currently selected/displaying contact to the newly created one
<a onClick={this.addContact.bind(this)} href="#" id="AddContact">Add Contact</a>
// Clicking on this will allow you to go browse back to the previous contact to view the details of the previous contact
<a onClick={this.prevContact.bind(this)} href="#" id="PrevContact">Previous Contact</a>
// Clicking on this will allow you to go browse to the next contact to view the details of the next contact
<a onClick={this.nextContact.bind(this)} href="#" id="NextContact">Next Contact</a>
</div>
<div className="floatRight">
<label>First Name:</label>
//The text field should be prepopulated with "Unknown First Name", clicking inside of it should make the text vanish so the user can enter data
<input type="text" name="firstName" id="firstName" defaultValue={this.contactDetails.firstName} />
<label>Last Name:</label>
//The text field should be prepopulated with "Unknown Last Name", clicking inside of it should make the text vanish so the user can enter data
<input type="text" name="lastName" id="lastName" defaultValue={this.contactDetails.lastName} />
<label>Age:</label>
//The text field should be prepopulated with "0", clicking inside of it should make the text vanish so the user can enter data
<input type="text" name="age" id="age" defaultValue={this.contactDetails.age} />
</div>
</div>
</div>
);
}
}
Please also feel free to point out any inaccuracies of my thought process, terminology, or code utilization. Also if anyone provides any answers that are not considered good practice, please provide feedback.