I have created a form using react bootstrap and added a data table above for displaying the inputted data but i keep getting the below error when my browser tries to render my page.
1 of 10 errors on the page
TypeError: this.context._getProps is not a function
value
/WebApp/sustainable-scuba-web-app/hocs/control/index.js:9
6 | static displayName = `Control(${WrappedComponent.name})`;
7 |
8 | render() {
> 9 | const props = this.context._getProps(this.id);
| ^ 10 |
11 | if (!props) {
12 | return null;
diveLog.component
import React, { useState, useRef, Component } from 'react';
// import * as ReactBootstrap from "react-bootstrap";
import { Form, Jumbotron } from 'react-bootstrap';
import { Col, Button, Table } from 'react-bootstrap';
import { Redirect } from "react-router-dom";
import { connect } from "react-redux";
//import Form from "react-validation/build/form";
import Input from "react-validation/build/input";
import CheckButton from "react-validation/build/button";
import isEmail from "validator/lib/isEmail";
import {registerUserDive} from "../../actions/divelog.action"
export class DiveLog extends Component {
constructor(props){
super(props);
this.handleSubmitDive = this.handleSubmitDive.bind(this);
this.onChangeDiveType = this.onChangeDiveType.bind(this);
this.onChangeSchoolName = this.onChangeSchoolName.bind(this);
this.onChangeCurrent = this.onChangeCurrent.bind(this);
this.onChangeVisibility = this.onChangeVisibility.bind(this);
this.onChangeDiveDate = this.onChangeDiveDate.bind(this);
this.onChangeMaxDepth = this.onChangeMaxDepth.bind(this);
this.onChangeEquipmentWorn = this.onChangeEquipmentWorn.bind(this);
this.onChangeDiverUserNumber = this.onChangeDiverUserNumber.bind(this);
this.onChangeVerifiedBySchool = this.onChangeVerifiedBySchool.bind(this);
this.onChangeDiveNotes = this.onChangeDiveNotes.bind(this);
this.onChangeDivePoint = this.onChangeDivePoint.bind(this);
this.state = {
diveTypeID: "",
diveSchoolNameID: "",
diveCurrentID: "",
diveVisibilityID: "",
diveDate: "",
diveMaxDepth: "",
diveEquipmentWorn: "",
diverUserNumber: "",
diveVerifiedBySchool: "",
diveNotes: "",
divePoint: "",
loading: false,
};
}
onChangeDiveType(e) {
this.setState({
diveTypeID: e.target.value,
});
}
onChangeSchoolName(e) {
this.setState({
diveSchoolNameID: e.target.value,
});
}
onChangeCurrent(e) {
this.setState({
diveCurrentID: e.target.value,
});
}
onChangeVisibility(e){
this.setState({
diveVisibilityID: e.target.value,
});
}
onChangeDiveDate(e) {
this.setState({
diveDate: e.target.value,
});
}
onChangeMaxDepth(e){
this.setState({
diveMaxDepth: e.target.value,
});
}
onChangeEquipmentWorn(e) {
this.setState({
diveEquipmentWorn: e.target.value,
});
}
onChangeDiverUserNumber(e){
this.setState({
diverUserNumber: e.target.value,
});
}
onChangeVerifiedBySchool(e){
this.setState({
diveVerifiedBySchool: e.target.value,
});
}
onChangeDiveNotes(e) {
this.setState({
diveNotes: e.target.value,
});
}
onChangeDivePoint(e){
this.setState({
divePoint: e.target.value,
});
}
handleSubmitDive(e) {
e.preventDefault();
this.setState({
loading: true,
});
//this.form.validateAll();
//const {dispatch, history} = this.props;
if (this.checkBtn.context._errors.length === 0) {
this.props
.dispatch(registerUserDive(
this.state.diveTypeID,
this.state.diveSchoolNameID,
this.state.diveCurrentID,
this.state.diveVisibilityID,
this.state.diveDate,
this.state.diveMaxDepth,
this.state.diveEquipmentWorn,
this.state.diverUserNumber,
this.state.diveVerifiedBySchool,
this.state.diveNotes,
this.state.diveNotes))
.then(() => {
window.history.push("/divelog");
window.location.reload();
})
.catch(() => {
this.setState({
loading: false
});
});
}
}
render() {
const { message } = this.props;
//const { user: currentUser } = this.props;
//if (!currentUser) {
// return <Redirect to="/login"/>;
//}
return (
<div className="container">
<Jumbotron>
<h1>This is the dive log component.</h1>
<p>
This is a simple hero unit, a simple jumbotron-style component for calling
extra attention to featured content or information.
</p>
<Table striped bordered hover variant="dark">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</Table>
</Jumbotron>
<div className="diveLogForm">
<Form
onSubmit={this.handleSubmitDive}
ref={(c) => {
this.form = c;
}}>
{!this.state.successful && (
<div>
<Form.Group controlId="diveType.ControlSelect1">
<Form.Label>Dive Type</Form.Label>
<Input
type="diveType"
className="form-control"
name="diveType"
value={this.state.diveTypeID}
onChange={this.onChangeDiveType}
/>
<Form.Control as="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Form.Control>
</Form.Group>
<Form.Group controlId="DiveSchool.ControlSelect2">
<Form.Label>Dive School</Form.Label>
<Input
type="diveSchool"
className="form-control"
name="diveSchool"
value={this.state.diveSchoolID}
onChange={this.onChangeSchoolName}
/>
<Form.Control as="select" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Form.Control>
</Form.Group>
<Form.Group controlId="DiveCurrent.ControlSelect3">
<Form.Label>Dive Current</Form.Label>
<Input
type="diveCurrent"
className="form-control"
name="diveCurrent"
value={this.state.diveCurrentID}
onChange={this.onChangeCurrent}
/>
<Form.Control as="select" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Form.Control>
</Form.Group>
<Form.Group controlId="DiveVisibility.ControlSelect4">
<Form.Label>Dive Visibility</Form.Label>
<Input
type="diveVisibility"
className="form-control"
name="diveVisibility"
value={this.state.diveVisibilityID}
onChange={this.onChangeVisibility}
/>
<Form.Control as="select" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
