Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {Component} from 'react';
- import Form from 'react-bootstrap/Form';
- import { Formik } from 'formik';
- import Button from 'react-bootstrap/Button';
- class Alerts extends Component {
- constructor(props) {
- super(props);
- this.loadAlertData = this.loadAlertData.bind(this);
- this.state = {
- alertRecipient: {},
- alertId: '',
- alertVehicles: []
- }
- }
- componentDidMount(){
- this.loadAlertData();
- }
- loadAlertData(){
- // this will be an API call eventually, obviously.
- // if this is initialised in the constructor then everything works!
- this.setState( {
- alertRecipient: {
- name: 'Rob',
- simNumber: '0123456789',
- },
- alertId: 1,
- alertVehicles: [
- {id: 1, vrn: 'vehicle A', selected: true },
- {id: 2, vrn: 'vehicle B', selected: false },
- {id: 3, vrn: 'vehicle C', selected: true }
- ]
- })
- }
- render() {
- const { alertRecipient, alertId, alertVehicles } = this.state;
- return (
- <>
- <Formik
- initialValues={{ alertRecipient, alertId, alertVehicles }}
- onSubmit={ values => {
- window.alert(JSON.stringify(values))
- }
- }
- render={({values, handleChange, handleSubmit}) => (
- <Form onSubmit={handleSubmit}>
- <Form.Label>Name</Form.Label>
- <Form.Control
- type="text"
- name="alertRecipient.name"
- value={values.alertRecipient.name}
- onChange={handleChange}
- />
- <Form.Label>Phone number</Form.Label>
- <Form.Control
- type="text"
- name="alertRecipient.simNumber"
- value={values.alertRecipient.simNumber}
- onChange={handleChange}
- >
- </Form.Control>
- <Form.Label>Vehicles</Form.Label>
- {
- //get an error if we just use alertVehicles.length here??
- values.alertVehicles.length === 0 ? null : alertVehicles.map((veh, index) => (
- <Form.Check type="checkbox"
- key={veh.id}
- label={veh.vrn}
- name={`alertVehicles[${index}].selected`}
- checked={values.alertVehicles[index].selected}
- onChange={ handleChange }
- />
- ))
- }
- <Button type="submit">Save</Button>
- </Form>
- )
- }
- />
- </>
- )
- }
- }
- export default Alerts;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement