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 one

count number

copy the code see the value



class  HomeMadeItem extends Component {
    //modal
    constructor() {
        super();
        this.state={
            show:false
        }
    }
    modalClose=()=>this.setState({show:false})
    modalOpen=()=>this.setState({show:true})

// end modal

-----------
<Col onClick={this.modalOpen} xs={12} sm={6} md={4} lg={3} xl={2}>
{/*<NavLink to="/">*/}
<Card className="writer-books-card">
<Card.Img variant="top cardImg" src={piri2} />
<Card.Body>
<Card.Title> Stone Piri</Card.Title>
<Card.Text>100% Stone</Card.Text>
<Card.Text>Tk.1200</Card.Text>
<Button variant=" border border-primary text-info font-weight-bold">View Details</Button>
<Button variant=" border border-primary stock-books-card-btn ml-1 block ml-2"><img src={logo3} alt="cart" className="cartImg" /></Button>
</Card.Body>
</Card>
{/*</NavLink>*/}
</Col>

</Row>
</Container>

//modal
<Modal show={this.state.show} onHide={this.modalClose}>
<Modal.Header closeButton>
<Modal.Title>Coming soon</Modal.Title>
</Modal.Header>
<Modal.Body className=”text-info”>Please waite some day ! your Preferred Product coming soon.</Modal.Body>
<Modal.Footer>
<Button variant=”secondary” onClick={this.modalClose}>
Close
</Button>

</Modal.Footer>
</Modal>

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