lib/Mind-Expanding-Books
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

React error fixes (#180)

Browse Source 
* fix className errors by replacing class= with className= in templates; remove unused imports

* fix component key warning by adding the node.id key to the component
This commit is contained in:
Josh RosenHanst
2019-10-17 02:21:25 -04:00
committed by Vishnu Ks
parent 89cdab6ad2
commit fb6e2e8b5d
4 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/src/components/bookcard.js
View File

@@ -1,13 +1,12 @@
import { Link } from "gatsby"
import PropTypes from "prop-types" import PropTypes from "prop-types"
import React from "react" import React from "react"
import StarRatings from 'react-star-ratings'; import StarRatings from 'react-star-ratings';
const BookCard = ({ book }) => ( const BookCard = ({ book }) => (
<div key={book.id} class="w-56 rounded overflow-hidden shadow-lg m-3"> <div className="w-56 rounded overflow-hidden shadow-lg m-3">
<img class="w-full" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1414347376l/18050143.jpg" alt="Sunset in the mountains" /> <img className="w-full" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1414347376l/18050143.jpg" alt="Sunset in the mountains" />
<div class="px-6 py-4"> <div className="px-6 py-4">
<div class="font-bold text-xl mb-0">{ book.title }</div> <div className="font-bold text-xl mb-0">{ book.title }</div>
<div className="text-gray-700 font-bold text-base mb-1"> <div className="text-gray-700 font-bold text-base mb-1">
<span className="mr-2 align-middle">{ book.year }</span> <span className="mr-2 align-middle">{ book.year }</span>
<StarRatings <StarRatings
@@ -22,8 +21,8 @@ const BookCard = ({ book }) => (
{ book.author } { book.author }
</p> </p>
</div> </div>
<div class="px-6 py-4"> <div className="px-6 py-4">
<span class="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{book.category}</span> <span className="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{book.category}</span>
</div> </div>
</div> </div>
) )

2
app/src/components/header.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types"
import React from "react" import React from "react"
const Header = ({ siteTitle }) => ( const Header = ({ siteTitle }) => (
<header class="my-1 bg-red"> <header className="my-1 bg-red">
<h1 style={{ margin: 0 }}> <h1 style={{ margin: 0 }}>
<Link <Link
to="/" to="/"

2
app/src/components/layout.js
View File

@@ -26,7 +26,7 @@ const Layout = ({ children }) => {
return ( return (
<> <>
<Header siteTitle={data.site.siteMetadata.title} /> <Header siteTitle={data.site.siteMetadata.title} />
<div class="container mx-auto px-10"> <div className="container mx-auto px-10">
<main>{children}</main> <main>{children}</main>
<footer> <footer>
© {new Date().getFullYear()}, Built with © {new Date().getFullYear()}, Built with

6
app/src/pages/index.js
View File

@@ -1,8 +1,6 @@
import React from "react" import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout" import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo" import SEO from "../components/seo"
import BookCard from "../components/bookcard" import BookCard from "../components/bookcard"
@@ -10,10 +8,10 @@ export default ({data}) => {
return ( return (
<Layout> <Layout>
<SEO title="Home" /> <SEO title="Home" />
<div class="flex flex-wrap"> <div className="flex flex-wrap">
{data.allBooksJson.edges.map(function(x) { {data.allBooksJson.edges.map(function(x) {
return ( return (
<BookCard book={x.node} /> <BookCard book={x.node} key={x.node.id} />
) )
})} })}
</div> </div>