const Error=()=>{
<div><p>Error!</p></div>
}
const Loading=()=>{
<div><p>Loading...</p></div>
}
const Todos=()=>{
<div><ul>
{this.props.todos.map(({ id, text }) => (
<li key={id}>{text}</li>
))}
</ul></div>
}
render() {
const { data: { loading, error, todos } } = this.props;
if (loading) {
<Loading>
} else if (error) {
<Error>
} else {
return (
<Todos todos={todos }>
);
}
}
refreshInput(event) {
const target = event.target.innerHTML;
//if you clicked a number
if(!isNaN(parseFloat(target)) && isFinite(target)) {
let number = this.state.firstOperand + target
this.setState({
firstOperand: number,
valueInput: number,
})
}
}
$(window).on('scroll', function(){
if( $(window).scrollTop() > $(document).height() - $(window).height() ) {
//вызов апи
}
}).scroll();
class AddAddressComponent extends React.Component {
render() {
let {provinceList,cityList} = this.props
if(cityList === undefined || provinceList === undefined){
console.log('undefined props')
} else {
console.log('defined props')
}
return (
<div>rendered</div>
)
}
}
AddAddressComponent.defaultProps = {
cityList: [],
provinceList: [],
};
import ".css"
.red {
font-size: 25px;
background-color: red;
color: white;
}
import React from 'react'
import btn from './styles.css'
export default class CoolButton extends React.Component {
render() {
return (
<button className={btn.red}>{this.props.text}</button>
)
}
}