Another week of pushing through!

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

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Handling Environment Variables with Netlify + React

A Vue.js & Node JS Developer’s Take on Getting Atom Nice and Friendly

Creating a REST API in NodeJS with Express, Typescript, MongoDB and Docker — Part 1

[2021] 16 React tools every front-end developer should know about

Stories by Students — Sexpo

Capture Screen + Network = ReproNow

How the Provider Provides in React Redux

React Tip: Keep as Little Logic in the Component Body as Possible

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Parker Williamson

Parker Williamson

More from Medium

Blue Like a Bruise

Album Review: Adekunle Gold - “Catch Me If You Can”.

CATCH ME IF YOU CAN- ALBUM ART

“BARBECUED CHICKEN AND OTHER STORIES”

Dear John