Welcome to the discussion about the balance component exercise.
Style the AccountBalance component on your own before proceeding to the next section.
In AccountBalance.jsx:
import ‘./AccountBalance.css’;
export default class AccountBalance extends Component {
render() {
return (
<section className="balance">
Balance: $ {this.props.amount}
</section>
);
}
}
In AccountBalance.css:
.balance {
font-size: 3rem;
}
I went for a similar style as the table:
section {
color: green;
font-size: 1.4rem;
border: 1px solid #cccccc;
padding: 0.25rem;
}
Also added a label so you can tell that the balance is a balance.
export default class AccountBalance extends Component {
render() {
return (
<section>
Balance: $ {this.props.amount}
</section>
);
}
}
import React, { Component } from ‘react’;
import PropTypes from ‘prop-types’;
import ‘./AccountBalance.css’;
class AccountBalance extends Component {
render() {
return (
$ {this.props.amount}
) ;
}
}
export default AccountBalance;
AccountBalance.propTypes = {
amount: PropTypes.number.isRequired
};
//=========================================
//AccountBalance.css
section{
background-color: #c5e925;
border: 1px solid;
width: 25vh;
margin: 50px auto 50px auto ;
.jsx
export default class AccountBalance extends Component {
render() {
return (
<section>
$ {this.props.amount}
</section>
);
}
}
and .css
section {
color: yellow;
font-size: 2rem;
border: 1px solid yellow;
width: 25vh;
}
import React, { Component } from 'react'
import './AccountBalance.css';
import PropTypes from 'prop-types';
export default class AccountBalance extends Component {
render() {
return (
<section className="balance">
<strong>Balance : </strong>$ {this.props.amount}
</section>
);
}
}
AccountBalance.propTypes = {
amount: PropTypes.number.isRequired
}
.balance {
margin: 20px auto 0 auto;
border: 1px solid #cccccc;
width: 98vw;
max-width: 780px;
font-size: 1.4rem;
}
JSX:
...
render() {
return (
<section className="accountbalance">
Your Balance is: {this.state.currency}{this.state.amount}
</section>
)
}
...
.CSS:
.accountbalance{
color: greenyellow;
font-size: 2rem;
border: 1px solid #cccccc;
padding: 1rem;
}
In AccountBalance.jsx:
import ‘./AccountBalance.css’;
export default class AccountBalance extends Component {
render() {
return (
<section className="balance">
Balance: $ {this.props.amount}
</section>
);
}
}
In AccountBalance.css:
.balance {
font-size: 3rem;
}
Some padding and line-height would help.
AccountBalance.css
.accountbalance {
color: yellow;
font-size: 2rem;
padding: 1rem;
border: 1px solid whitesmoke;
}
AccountBalance.jsx
import React, {Component} from "react";
import PropTypes from 'prop-types';
import './AccountBalance.css';
export default class AccountBalance extends Component {
render() {
return (
<section className="accountbalance">
${this.props.amount}
</section>
);
}
}
AccountBalance.propTypes = {
amount: PropTypes.number.isRequired
}
I have downloaded some dependencies therefore I didn’t see the reason to add the attribute into the tag:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './AccountBalance.css'
export default class AccountBalance extends Component {
render() {
return (
<section>
${this.props.amount}
</section>
)
}
}
AccountBalance.propTypes = {
amount: PropTypes.number.isRequired
}
The CSS file looks like this:
tbody {
display: table-row-group
}
.coin-table {
font-size: 20px;
color: orange;
align-content: left;
}
.coin-row td {
border: 2px solid gold;
}
.App {
background-color: gainsboro;
}
.App-title {
color: gold;
}
section {
display: inline;
align-self: auto;
}```
import './accountbalance.css';
export default class AccountBalance extends Component {
render() {
return (
<section className="account-balance">
Balance: <span> ${this.props.amount} </span>
</section>
)
}
}
.account-balance {
width: 25vh;
font-size: 1.2rem;
color: #cccccc;
padding: 1rem;
}
span {
color: #769460;
}
import './AccountBalance.css';
export default class AccountBalance extends Component {
render() {
return (
<section className="AccountBalance">
$ {this.props.amount}
</section>
);
}
}
.AccountBalance{
font-size: 3rem;
color: darkorange;
}
import React, { Component } from ‘react’
import PropTypes from ‘prop-types’
import ‘./AccountBalance.css’
export default class AccountBalance extends Component {
constructor(props) {
super(props);
this.state = {
amount: this.props.amount
}
}
currencyOptions = {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}
getAmount = () => {
return (
this.state.amount.toLocaleString(undefined, this.currencyOptions)
);
}
render() {
return (
<span>
Account Balance
<span className="amountclass">
${this.getAmount()}
</span>
</span>
)
}
}
AccountBalance.protoType = {
amount: PropTypes.number.isRequired
}
css file:
.amountclass {
color: red
}
Question:
what are your suggestions for the .gitignore file? should package-lock.json be in this list?
render() {
return (
< Section >
${this.getAmount()}
< / Section >
)
}
does not work I get this error:
Error: Objects are not valid as a React child (found: object with keys {$$typeof, render, attrs, componentStyle, displayName, shouldForwardProp, foldedComponentIds, styledComponentId, target, withComponent, warnTooManyClasses, toString}). If you meant to render a collection of children, use an array instead.
is this some nodejs version problem?
$ node --version
v10.16.3
$ npm --version
6.12.0
I also tried this version:
$ node --version
v12.18.3
$ npm --version
6.14.8
same error message using
Data modeling is always key. Here, I guess a constant with exactly 2 digits is sufficient, then you can use padStart - padEnd to manage the zeros.
I know some other currencies have more or less digits (with time it will be less due to inflation), while in case of Bitcoin, I can imagine one day more digits… but you tackle the problem once you need it.