I am trying to individually select a checkbox but am unable to. I am getting a TypeError: this.state.checkboxes.map is not a function error. I am able to select/deselect all buttons but thats it. I am new to React so I do not know how to fix this error! Also new to posting so if you need more info, let me know.
import React from 'react';
import { Container, Row, Col, Button, Table, Modal, ModalBody, Card, Accordion, Form, FormControl } from 'react-bootstrap';
import Header from '../../common/Header';
import ModalPreset from '../../common/ModalPreset';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
import Checkbox from '../../common/Checkbox';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
interface WindowsState {
modal: string;
filters: any;
checkboxes: any;
windows: any;
}
export default class Windows extends React.Component<any, WindowsState> {
dateWithoutTime = function (date: any) {
var d = new Date(date);
return d;
};
state = {
modal: '',
filters: {
startDate: this.dateWithoutTime(new Date()),
endDate: this.dateWithoutTime(new Date())
},
checkboxes: [
{
label: "organization 1",
isSelected: false
},
{
label: "organziation 2",
isSelected: false
},
{
label: "organization 3",
isSelected: false
},
{
label: "organization 4",
isSelected: false
},
{
label: "organziation 5",
isSelected: false
},
{
label: "organization 6",
isSelected: false
},
{
label: "organization 7",
isSelected: false
},
{
label: "organziation 8",
isSelected: false
},
{
label: "organization 9",
isSelected: false
},
],
windows: [
{
date: "Nov. 1 - Dec. 1, 2019",
organizations: [
{
name: "org. 1"
}
]
},
{
date: "Dec. 1 - Jan. 1, 2020",
organizations: [
{
name: "org. 2"
},
{
name: "org. 3"
}
]
},
{
date: "Jan. 1 - Feb. 1, 2020",
organizations: [
{
name: "org. 5"
},
{
name: "org. 6"
}
]
},
{
date: "April 1 - May 1, 2020",
organizations: [
{
name: "org. 1"
},
{
name: "org. 4"
}
]
},
{
date: "June 1 - July 1, 2020",
organizations: [
{
name: "org. 9"
},
{
name: "org. 10"
}
]
}
]
};
setModalShow = (modalState: string) => {
this.setState({ modal: modalState });
}
updateStartDateFilter = (value: any) => {
let date = this.dateWithoutTime(value);
this.setState({
filters: {
...this.state.filters,
startDate: date
}
});
};
updateEndDateFilter = (value: any) => {
let date = this.dateWithoutTime(value);
this.setState({
filters: {
...this.state.filters,
endDate: date
}
});
};
selectAllCheckboxes = (isSelected: boolean) => {
let newCheckboxesArray: any = [];
this.state.checkboxes.map((checkbox: any, index: number) => {
newCheckboxesArray[index] = {
label: checkbox.label,
isSelected: isSelected
}
})
this.setState({
checkboxes: newCheckboxesArray
});
};
selectAll = () => this.selectAllCheckboxes(true);
deselectAll = () => this.selectAllCheckboxes(false);
handleCheckboxChange = (changeEvent: any, isSelected: boolean) => {
const { name } = changeEvent.target;
this.setState(prevState => ({
checkboxes: {
...prevState.checkboxes,
[name]: !prevState.checkboxes[name]
}
}));
};
createCheckbox = (id: any, value: any, label: string, isSelected: boolean) => (
<Checkbox
label={label}
onCheckboxChange={this.handleCheckboxChange}
isSelected={isSelected}
/>
);
createOrgTableData = (id: any, value: any, name: string) => (
<tr>
<td className="align-middle">{name}</td>
<td className="text-center">
<Button variant="danger" onClick={() => this.setModalShow('delete_org')} className="org-delete-button">Delete</Button>
</td>
</tr>
);
createWindowData = (window: any, index: string) => (
<Card>
<Row className="date-container" >
<Col md={10}>
<Accordion.Toggle as={Button} variant="link" eventKey={index} >
<p className="mb-0">{window.date}</p>
</Accordion.Toggle>
</Col>
<Col className="mt-2 mb-2" md={2}>
<Button variant="info" className="mr-3" onClick={() => this.setModalShow('edit_window')} > Edit</Button>
<Button variant="danger" onClick={() => this.setModalShow('delete_window')} > Delete</Button>
</Col>
</Row>
<Accordion.Collapse eventKey={index}>
<Card.Body>
<Row>
<Col>
Organizations:
</Col>
<Col className="org-buttons">
<Button className="mb-3 mr-3" onClick={() => this.setModalShow('create_org')}>
Add New Organization
</Button>
<Button className="mb-3" onClick={() => this.setModalShow('send_email')}>Send Email</Button>
</Col>
</Row>
<Table className="org-enabled-table" striped bordered>
<thead>
<tr>
<th className="align-items-center organizations-enabled">Organizations Enabled</th>
<th className="text-center">Actions</th>
</tr>
</thead>
<tbody>
{
window.organizations.map((organization: any, index: number) => (
this.createOrgTableData(index, index, organization.name)
))}
</tbody>
</Table>
</Card.Body>
</Accordion.Collapse>
</Card>
);
render() {
return (
<div>
<Header />
<Container>
<Row className="mt-2">
<Col md={4} className="pt-0">
<h2>Upload Windows</h2>
</Col>
<Col className="text-right" md={8}>
<Button onClick={() => this.setModalShow('create_window')}>
Add New Window
</Button>
</Col>
</Row>
<Row className="mt-5">
<Col>
<Row className="window-headers">
<Col md={4}>
<p>Window Date</p>
</Col>
<Col className="actions-header" md=>
<p>Actions</p>
</Col>
</Row>
<Accordion className="accordion-windows">
{this.state.windows.map((window: any, index: any) => (
this.createWindowData(window, index)
))}
</Accordion>
</Col>
</Row>
<Modal show={this.state.modal === 'create_window'}>
<Modal.Header className="font-weight-bold">Add Window</Modal.Header>
<ModalBody>
<Row className="calendar-rows mb-3">
<Col >
<p>Start Date:</p>
<DatePicker
selected={this.state.filters.startDate}
onChange={this.updateStartDateFilter}
/>
</Col>
<Col >
<p>End Date:</p>
<DatePicker
selected={this.state.filters.startDate}
onChange={this.updateStartDateFilter}
/>
</Col>
</Row>
<p>Organization:</p>
<Form>
<div className="organization-container">
{
this.state.checkboxes.map((checkbox: any, index: any) => (
this.createCheckbox(index, index, checkbox.label, checkbox.isSelected)
))}
</div>
<div className="mt-3">
<Button
variant="info"
size="sm"
className="mr-2"
onClick={this.selectAll}
>
Select All
</Button>
<Button
variant="info"
size="sm"
className="mr-2"
onClick={this.deselectAll}
>
Deselect All
</Button>
</div>
</Form>
</ModalBody>
<Modal.Footer>
<Button variant="secondary" onClick={() => this.setModalShow('')}>Cancel</Button>
<Button>Add</Button>
</Modal.Footer>
</Modal>
<ModalPreset show={this.state.modal === 'edit_window'}>
<Modal.Header className="font-weight-bold">Edit Window</Modal.Header>
<ModalBody>
<Row className="calendar-rows">
<Col>
<p>Start Date:</p>
<DatePicker
selected={this.state.filters.startDate}
onChange={this.updateStartDateFilter}
/>
</Col>
<Col>
<p>End Date:</p>
<DatePicker
selected={this.state.filters.endDate}
onChange={this.updateEndDateFilter}
/>
</Col>
</Row>
</ModalBody>
<Modal.Footer>
<Button variant="secondary" onClick={() => this.setModalShow('')}>Cancel</Button>
<Button>Save</Button>
</Modal.Footer>
</ModalPreset>
<ModalPreset show={this.state.modal === 'delete_window'}>
<Modal.Header className="font-weight-bold modal-header">
<FontAwesomeIcon className="mt-1 mr-1" icon={faExclamationTriangle} />
Delete Window</Modal.Header>
<ModalBody>
Are you sure you want to delete this window? This will delete all organizations associated with the window and cannot be undone.
</ModalBody>
<Modal.Footer>
<Button variant="secondary" onClick={() => this.setModalShow('')}>Cancel</Button>
<Button variant="danger">Delete</Button>
</Modal.Footer>
</ModalPreset>
<ModalPreset show={this.state.modal === 'create_org'}>
<Modal.Header className="font-weight-bold">Add Organization</Modal.Header>
<ModalBody>
<p>Organization Name:</p>
<Form>
<div className="organization-container">
{this.state.checkboxes.map((checkbox: any, index: number) => (
this.createCheckbox(index, index, checkbox.label, checkbox.isSelected)
))}
</div>
<div className="mt-3">
<Button
variant="info"
size="sm"
className="mr-2"
onClick={this.selectAll}>
Select All
</Button>
<Button
variant="info"
size="sm"
className="mr-2"
onClick={this.deselectAll}>
Deselect All
</Button>
</div>
</Form>
</ModalBody>
<Modal.Footer>
<Button variant="secondary" onClick={() => this.setModalShow('')}>Cancel</Button>
<Button>Add</Button>
</Modal.Footer>
</ModalPreset>
<ModalPreset show={this.state.modal === 'delete_org'}>
<Modal.Header className="font-weight-bold modal-header">
<FontAwesomeIcon className="mt-1 mr-1" icon={faExclamationTriangle} />
Delete Window</Modal.Header>
<ModalBody>
Are you sure you want to delete this organization? This cannot be undone.
</ModalBody>
<Modal.Footer>
<Button variant="secondary" onClick={() => this.setModalShow('')}>Cancel</Button>
<Button variant="danger">Delete</Button>
</Modal.Footer>
</ModalPreset>
<ModalPreset show={this.state.modal === 'send_email'}>
<Modal.Header className="font-weight-bold">Send Email</Modal.Header>
<ModalBody>
<p>Select the organizations you would like to send an email to:</p>
<Form>
<div className="mt-3 mb-3">
<Button
variant="info"
size="sm"
className="mr-2"
onClick={this.selectAll}>
Select All
</Button>
<Button
variant="info"
size="sm"
className="mr-2"
onClick={this.deselectAll}>
Deselect All
</Button>
</div>
<div className="organization-container">
{this.state.checkboxes.map((checkbox: any, index: number) => (
this.createCheckbox(index, index, checkbox.label, checkbox.isSelected)
))}
</div>
</Form>
<br />
<FormControl as="textarea" placeholder="Insert email here"></FormControl>
</ModalBody>
<Modal.Footer>
<Button variant="secondary" onClick={() => this.setModalShow('')}>Cancel</Button>
<Button>Send</Button>
</Modal.Footer>
</ModalPreset>
</Container>
</div >
);
}
}
Aucun commentaire:
Enregistrer un commentaire