Browse Source

Props is a bad word

master
Gregory Rudolph 4 years ago
parent
commit
68401d9a99
Signed by: rudi
GPG Key ID: EF64F3CBD1A1EBDD
  1. 19
      src/App.js

19
src/App.js

@ -4,17 +4,16 @@ const sqlCards = [{ "CardImg":"https://is4-ssl.mzstatic.com/image/thumb/Purple11 @@ -4,17 +4,16 @@ const sqlCards = [{ "CardImg":"https://is4-ssl.mzstatic.com/image/thumb/Purple11
{ "CardImg":"https://spellbook.blob.core.windows.net/hodassets/defaultportraits/fighter_default_cultist_female_0_2.jpg", "CardName": "Dragon Worshipper", "ManaCost": 1, "Power": 1, "Toughness": 1, "CardDesc": "He spends his days praying to dragons.", "CreatureType": "Human" },
{ "CardImg":"https://a.wattpad.com/useravatar/Angoleth.256.592295.jpg", "CardName": "Dragon Whelp", "ManaCost": 2, "Power": 3, "Toughness": 2, "CardDesc": "He will get there.", "CreatureType": "Dragon" }];
function Card(props) {
props = props.props
function Card(data) {
return (
<div class="card">
<h4><b>{props.CardName}</b></h4>
<img src={props.CardImg !== undefined ? props.CardImg : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} />
<h4><b>{data.CardName}</b></h4>
<img src={data.CardImg !== undefined ? data.CardImg : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} />
<div class="container">
<p>{props.CardDesc}</p>
<p style={{position: "absolute", bottom: -8, left: 8}}>Mana: {props.ManaCost}</p>
<p style={{position: "absolute", bottom: -8, left: 125}}>Power: {props.Power} </p>
<p style={{position: "absolute", bottom: -8, right: 8}}>Toughness: {props.Toughness}</p>
<p>{data.CardDesc}</p>
<p style={{position: "absolute", bottom: -8, left: 8}}>Mana: {data.ManaCost}</p>
<p style={{position: "absolute", bottom: -8, left: 125}}>Power: {data.Power} </p>
<p style={{position: "absolute", bottom: -8, right: 8}}>Toughness: {data.Toughness}</p>
</div>
</div>
)
@ -24,9 +23,9 @@ function App() { @@ -24,9 +23,9 @@ function App() {
return (
<div className="App">
<ul>
{sqlCards.map((props, i) => (
{sqlCards.map((data, i) => (
<li key={i}>
<Card props={props}/>
<Card {...data}/>
</li>
))}
</ul>

Loading…
Cancel
Save