I am getting this cards by clicking a button. If I click the button one card will be displayed like that If I click 20 times 20 cards will be displayed side by side I want to display three cards in first row side by side and in second row another three cards side by side how to do this? Thanks in advance
AllTasks.js
class AllTasks extends React.Component {
constructor(props){
super(props);
this.state = {
modal: false,
input: {},
errors: {},
startDate: new Date(),
actualStartDate: '',
username: '',
email: '',
cardOpen: false,
sidebar: false,
change: []
};
this.handleChange = this.handleChange.bind(this);
this.dateChange = this.dateChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
let input = this.state.input;
input[e.target.name] = e.target.value;
this.setState({
input,
})
}
showSidebar = () => {
this.setState({
sidebar: !this.state.sidebar
})
}
dateChange(date) {
let selectedDateFromCalender = date.toUTCString();
this.setState({
startDate: date,
actualStartDate: selectedDateFromCalender
});
}
validate(){
let input = this.state.input;
let errors = {};
let isValid = true;
//title
if(!input['modalTitle']){
isValid = false;
errors['modalTitle'] = 'cannot be empty';
}
//description
if(!input['modalDescription']){
isValid = false;
errors['modalDescription'] = 'cannot be empty';
}
this.setState({ errors: errors });
return isValid;
}
handleSubmit = (e, element) => {
e.preventDefault();
localStorage.setItem('data',JSON.stringify(this.state.input));
localStorage.setItem('date',JSON.stringify(this.state.actualStartDate));
let components = this.state.change;
element = <Card/>
components.push(element);
if(this.validate()){
console.log(this.state);
let input = {};
input['modalTitle'] = '';
input['modalDescription'] = '';
input['modalImportance'] = ''
this.setState({
input: input,
cardOpen: true,
actualStartDate: this.state.actualStartDate,
change: components
});
this.modalClose();
}
}
modalOpen(){
this.setState({
modal: true
});
}
modalClose(){
this.setState({
modal: false
})
}
render(){
return(
<>
<Navbar />
<div className="container">
<div className="row">
<div className="col-2">
</div>
<div className="col-sm-8">
<h1>All Tasks</h1>
</div>
<button type="button" className="btn col-sm-2" onClick={e => this.modalOpen(e)}><h5>+ New Task</h5></button>
</div>
</div>
<div className='popup'>
<Modal show={this.state.modal} handleClose={e => this.modalClose(e)}>
<div className="form-group">
<h5>Title</h5>
<input
type="text"
name='modalTitle'
value={this.state.input.modalTitle}
onChange={this.handleChange}
className="form-control"
placeholder="What needs to be done ?"
required
/>
<span style={{color: 'red'}}>{this.state.errors['modalTitle']}</span>
<h5>Description</h5>
<textarea
type="text"
name='modalDescription'
value={this.state.input.modalDescription}
onChange={this.handleChange}
className="form-control"
placeholder="Description"
rows="4"
cols="20"
maxlength = "80"
required
/>
<span style={{color: 'red'}}>{this.state.errors['modalDescription']}</span>
<h5>Date Picker</h5>
<DatePicker
className="datePicker"
type="date"
name="modalDate"
selected={this.state.startDate}
onChange={this.dateChange}
dateFormat="dd/MM/yyyy"
/>
<h5>Importance</h5>
<div className="selected">
<select className="form-control" id="exampleSelect1" name='modalImportance' onChange={this.handleChange}>
<option>Low</option>
<option>Medium</option>
<option>High</option>
</select>
</div>
</div>
<div className="form-group">
<button className="modalButton" type="button" onClick={e => this.handleSubmit(e)}>
Add New Task
</button>
</div>
</Modal>
</div>
{this.state.cardOpen ?
<div className="cards">
{this.state.change.map(comp => (comp))}
</div>
: null}
</>
);
}
}
export default AllTasks;
Cards.js
class Card extends React.Component {
constructor(props){
super(props);
this.state={
cardDelete: false
}
}
delete(e){
e.stopPropagation();
e.preventDefault();
this.setState({
cardDelete: true
})
}
render(){
const result = JSON.parse(localStorage.getItem('data'));
const selectedDate = JSON.parse(localStorage.getItem('date'));
const actualDate = selectedDate.split("",17);
return(
<>
{result ?
<div className="container">
<div className="col">
<div className="row">
<div className="col-2">
</div>
<div className="col-sm-5">
<div className="card">
<div className="card-body">
<div className="delete" onClick={this.delete}>
<AiIcons.AiTwotoneDelete/>
</div>
<h5 className="card-title">{result.modalTitle </h5>
<p className="card-text" {result.modalDescription}</p>
<div className="row">
<h5 className="card-text icon">
<AiIcons.AiOutlineFieldTime/> {actualDate}
</h5>
<div className="flag">
<AiIcons.AiFillFlag/>
</div>
</div>
</div>
</div>
</div>
<div className="col-5">
</div>
</div>
</div>
</div> : null }
</>
);
}
}
export default Card;
AllTasks.css
.container h1{
color: #03015d;
font-weight: bold;
}
.container .btn{
font-family: "Poppins",sans-serif;
width: 20vw;
padding: 1.8vh 15px;
border: 1px solid #c4c4c4;
border-radius: 7px;
margin-top: 10px;
outline: none;
font-size: 15px;
background-color: #03015d;
color: #fff;
}
.container {
margin-top: 50px;
}
.modal {
display: flex;
justify-content: center;
}
.popup h5{
margin-top: 10px;
}
.popup input {
font-family: "Poppins",sans-serif;
width: 20vw;
padding: 1.8vh 15px;
border: 1px solid #c4c4c4;
border-radius: 7px;
margin-top: 10px;
outline: none;
font-size: 15px;
}
.popup textarea {
font-family: "Poppins",sans-serif;
width: 20vw;
padding: 1.8vh 15px;
border: 1px solid #c4c4c4;
border-radius: 7px;
margin-top: 10px;
outline: none;
font-size: 15px;
}
.popup .datePicker {
width: 10vw;
padding: 1.8vh 15px;
border: 1px solid #c4c4c4;
border-radius: 7px;
margin-top: 10px;
outline: none;
font-size: 15px;
}
.selected {
width: 10vw;
border: 1px solid #c4c4c4;
border-radius: 7px;
margin-top: 10px;
outline: none;
font-size: 15px;
}
.popup .modalButton {
font-family: "Poppins",sans-serif;
width: 20vw;
padding: 1.8vh 15px;
border: 1px solid #c4c4c4;
border-radius: 7px;
margin-top: 10px;
outline: none;
font-size: 15px;
background-color: #03015d;
color: #fff;
}
.cards {
display: flex;
flex-direction: row;
}
Card.css
.card {
width: 18rem;
height: 13rem;
border-radius: 10px;
}
.card-title {
font-weight: bold;
}
.icon {
font-size: 20px;
/* font-weight: bold; */
}
.delete{
float: right;
font-size: 25px;
}
.flag{
font-size: 23px;
margin-left: 20px;
}
.sideItems{
padding: 10px 10px 10px;
}
