project one

count number

copy the code see the value


import React, {Component} from 'react';
import Button from "react-bootstrap/Button";

class Result extends Component {
constructor() {
super();
this.state = {
count: 0,
};
}

 updateCount() {
        this.setState((prevState, props) => {
            return {count: prevState.count + 1}
        });
    }

render() {

return (
<fragment>
<div className=”count”>
<Button classname=”btn-primary lg”onClick={() => this.updateCount()}>
Clicked {this.state.count} times
</Button>
</div>
<hr/>
</fragment>
);

}
}

export default Result;

CSS

.count{
  background: rgba(13, 199, 229, 0.14);
  width: 300px;
  height: 300px;
  text-align: center;
  margin-top: 100px;
}
.btn-primary {
  margin-top: 95px;
  padding: 30px;
  font-size: 32px;
}

Project two:
local time setup

import React, {Component} from ‘react’;

class EntryStock extends Component {

constructor(props){
super(props)
this.state= {date: new Date()};
}
componentDidMount() {
this.TimerId= setInterval(
()=>this.tick(),
1000
);

}
componentWillUnmount() {
clearInterval(this.TimerId)
}
tick(){
this.setState({date: new Date()
});
}
render() {
function formetName(user){
return user.firstName +’ ‘+ user.lastName;
}
const user={
firstName:”Local”,
lastName:”Time”,
};
return (
<div>
<h1 className=”bg”>Hello {formetName(user)}</h1>;
<h1 className=”bg”> Now Time is:{this.state.date.toLocaleTimeString()}.</h1>
</div>
);
}
}

export default EntryStock;

CSS:

.bg{
    background:green;
    text-align:center;
    padding:30px;
}
local time