Another week of pushing through!

This week was a very rough week for me. I have been since for over a week and my body has been sore, so it was a long week of reading in bed. I did some studying for React because I have a promising application out for a job in Utah which mainly uses React. I didn’t have much time to incorporate it into my practice coding for Github this week, but in the next few days I will be going over my curriculum again from school where I will look into what I have already learned with a friend from school. I did happen to go over my final project which re-explaining really helped me grasp what I had done again.

import { fetchCharacters } from '../actions/CharactersActions.jsx'import LinkToCharacters from './LinkToCharacters.jsx';class CharacterList extends Component {constructor(props) {super(props);this.state = {error: null,isLoaded: false,};}componentDidMount() {this.props.fetchCharacters();}render() {const { error } = this.state;const { characters } = this.props;if (error) {return <div>Error: {error.message}</div>;} else {return (<ul>{characters.map(character => (<LinkToCharacters character= {character} />))}</ul>);}}}const mapStateToProps = state => {return {characters: state.characters}}export default connect(mapStateToProps, {fetchCharacters})(CharacterList)

This code is my CharacterList component from my final project, where I mount my characters that I created on a backend database through Ruby. The only thing other than posting the list that this does, is also creates a link to each individual character where I then create a character card and have information fetched for each of the different attributes.

import React, { Component } from 'react';import { withRouter } from "react-router";class CharacterCard extends Component {render() {const { error, character } = this.props;if (error) {return <div>Error: {error.message}</div>;} else if (this.props.character){return (<div><img src={character.attributes.image_url} alt={character.attributes.name}></img><h3>{character.attributes.name}</h3><h4>{character.attributes.lane.name}</h4><p>{character.attributes.description}</p></div>);} else {return (<div></div>);}}}export default withRouter(CharacterCard)

All of these attributes are stored in my database, which is then a prop passed down to be inherited and displayed appropriately.

import React, { useState } from "react";import { connect } from "react-redux";import { createCharacters } from "../actions/CharactersActions.jsx";function CharacterCreate(props) {const [name, setName] = useState("");const [image_url, setImage_URL] = useState("");const [lane, setLane] = useState("");const [description, setDescription] = useState("");const handleSubmit = e => {e.preventDefault();const character = {name: name,image_url: image_url,lane: lane,description: description}console.log("a")props.createCharacters(character)console.log("b")setName("");setImage_URL("");setLane("");setDescription("");}const BarStyling = {width:"20rem",background:"#F2F1F9", border:"none", padding:"0.5rem"};return (<div className="character-form"><h3> Create a Champion! </h3><form onSubmit={handleSubmit}><label>Champion Name:</label><inputstyle={BarStyling}placeholder="Champion Name"name="name"type="text"onChange={(e) => setName(e.target.value)}value={name}/><br/><label> Image URL: </label><inputstyle={BarStyling}placeholder="Image URL"name="image_url"type="text"onChange={(e)=> setImage_URL(e.target.value)}value={image_url}/><br/><label>Champion Lane: </label><inputstyle={BarStyling}placeholder="Champion Lane"name="lane"type="text"onChange={(e)=> setLane(e.target.value)}value={lane}/><br/><label>Champion Description:</label><inputstyle={BarStyling}placeholder="Champion Description"name="description"type="text"onChange={(e)=> setDescription(e.target.value)}value={description}/><br></br><inputvariant="outline-primary"type="submit"value="Create Champion"/></form></div>)}export default connect(null, { createCharacters })(CharacterCreate)

Creating my characters I did have more issues with, but I hopped out of my comfort zone and chose to learn hooks because of how insanely useful they are. I had an issue connecting this to my database to save the characters but after phoning a friend and going through an hour long zoom call, we found my mistake. You can also see my console logs in this code which was a challenge from school to see which order the console logs would print, to insure that I fully understand what is happening when I am going through this.