Using the react-hook-form in class component about react-hook-form HOT 10 CLOSED

Nope i havent. I am new to ReactJS. If you could point me in some direction that would be great. This is my code for my page. basically, i have four select components and i need to warn the user when he presses the submit button if something is not filled. Thanks Boopal

/* eslint-disable*/ import React, { Component } from 'react'; import 'materialize-css/dist/js/materialize.min.js' import 'materialize-css/dist/css/materialize.min.css' import M from "materialize-css"; import moment from 'moment'; const vendorNodes = [ { id:1, name: 'Bay', nodeNames: ['TDMAR', 'HBCGCD','HSBCRD'], storeType:['Online'] }, { id:2, name: 'Saks', nodeNames: ['CAPEMV', 'CSMLNK','FEPTKM','HSBCRD','PTAHUE','SMTCLX','TOKNEX','VTPDCR'], storeType:['Physical'] }, { id:3, name: 'LT', nodeNames: ['PTACRD', 'LNTGCD','HSBCRD','FEPTKM','SMTCLX','TOKNEX','VTPDCR','INCISO'], storeType:['Online','Physical'] } ] class BannerReport extends Component { state = { selectedBanner : 'Bay', selectedStoreType:'', selectedVendor:'', selectedTranStatus:'', startDate:'', startTime:'', endDate:'', endTime:'', outputType:'', data:[], checked:'one', errors: { selectedBanner : 'false', selectedStoreType:'false', selectedVendor:'false', selectedTranStatus:'false', startDate:'false', startTime:'false', endDate:'false', endTime:'false', }, valid : '' } componentDidMount() { //console.log(this.state.data); M.AutoInit(); var context = this; var elems = document.querySelectorAll(".startDateset"); M.Datepicker.init(elems, { onSelect: function(date) { let errors = context.state.errors; errors['startDate'] = (date instanceof Date) ? 'true': 'false'; context.setState({ errors, startDate: moment(date).format('YYYY-MM-DD') }); console.log(context.state.errors); }, autoClose: true }); var elems1 = document.querySelectorAll(".endDateset"); M.Datepicker.init(elems1, { onSelect: function(date) { let errors = context.state.errors; errors['endDate'] = (date instanceof Date) ? 'true': 'false'; context.setState({ errors, endDate: moment(date).format('YYYY-MM-DD') }); }, autoClose: true }); } handleChange = (e) => { const { id, value } = e.target; let errors = this.state.errors; errors[id] = value.length > 0 ? 'true': 'false'; if((e.target.id).includes('Time')){ this.setState({errors, [id] : moment(value,'hh:mm A').format('HH:mm:ss') }) }else{ this.setState({errors, [id] : value }) } console.log(this.state.errors); } handleOnSubmit = (e) => { e.preventDefault(); if(this.validateForm(this.state.errors)){ let URL = '/api/getCount'; if(this.state.checked === 'two'){ URL = '/api/getTranDetails'; } fetch(URL,{ method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(this.state) }) .then((res) => { return res.json(); }) .then((results) => { this.setState({ data: results.data }); console.log(this.state.data); }); }else{ console.log('invalid form'); } } handleRadioButtonChange = (e) => { this.setState({checked:e.target.id}); } validateForm = (errors) => { let valid = true; Object.values(errors).forEach( // if we have an error string set valid to false (val) => val === 'false' && (valid = false) ); this.setState({valid}) return valid; } render(){ const {valid} = this.state; const getVendor = () => { const nodes = vendorNodes.filter((vendorNode) => vendorNode.name === this.state.selectedBanner)[0]; return( <select id="selectedVendor" className="browser-default" onChange={this.handleChange}> <option value="" disabled selected>Select</option> {nodes.nodeNames.map(m => <option value={m}>{m}</option>)} </select> ) } const getStoreType = () => { const nodes = vendorNodes.filter((vendorNode) => vendorNode.name === this.state.selectedBanner)[0]; return( <select id="selectedStoreType" className="browser-default" onChange={this.handleChange}> <option value="" disabled selected>Select</option> {nodes.storeType.map(m => <option value={m}>{m}</option>)} </select> ) } const getTableData = () => { const JsonTable = require('ts-react-json-table'); return( this.state.data.length ? ( <JsonTable className="table striped bordered" rows={ this.state.data } /> ): ( null ) ) } return( <div className="container"> <div className="row"> <form className="col s12" onSubmit={this.handleOnSubmit}> <div className="row"> <h6 className="col s12 m2">Banner</h6> <div className="input-field col s12 m3"> <select name="bannerDropDown" id="selectedBanner" className="browser-default" onChange={this.handleChange} > <option value="" disabled selected>Select</option> {vendorNodes.map((vendorNode) => <option key={vendorNode.id} >{vendorNode.name}</option> )} </select> {/* <label>Banner</label> */} </div> <h6 className="col s12 m2 offset-m1">Store Type</h6> <div className="input-field col s12 m3"> {getStoreType()} </div> </div> <div className="row"> <h6 className="col s12 m2">Vendor</h6> <div className="input-field col s12 m3"> {getVendor()} </div> <h6 className="col s12 m2 offset-m1">Tran Status</h6> <div className="input-field col s12 m3"> <select id="selectedTranStatus" className="browser-default" onChange={this.handleChange}> <option value="" disabled selected>Select</option> <option value="0">Approved</option> <option value="1">Declined</option> <option value="10">Timeout</option> <option value="2">Onhold</option> </select> {/* <label>Status</label> */} </div> </div> <div className="row"> <h6 className="col s12 m2">Start Date</h6> <div className="input-field col s6 m3"> <input id="startDate" type="text" className="datepicker startDateset" /> </div> <div className="input-field col s6 m3"> <input id="startTime" type="text" className="timepicker" onSelect={this.handleChange} /> </div> </div> <div className="row"> <h6 className="col s12 m2">End Date</h6> <div className="input-field col s6 m3"> <input id="endDate" type="text" className="datepicker endDateset" /> </div> <div className="input-field col s6 m3"> <input id="endTime" type="text" className="timepicker" onSelect={this.handleChange} /> </div> </div> <div className="row"> <h6 className="col s12 m2">Output Type</h6> <p className="input-field col s6 m3" > <label> <input name="group1" id='one' checked={this.state.checked === 'one'} onChange={this.handleRadioButtonChange} className='with-gap' type="radio" /> <span>Count</span> </label> </p> <p className="input-field col s6 m3" > <label> <input name="group1" id='two' checked={this.state.checked === 'two'} onChange={this.handleRadioButtonChange} className='with-gap' type="radio" /> <span>Transaction Details</span> </label> </p> </div> <button className="btn waves-effect waves-light">Submit <i className="material-icons right">send</i> </button> </form> </div> {valid === false && <span className='center red-text'>Please fill the form and submit</span>} <br /> {getTableData()} </div> ); } } export default BannerReport;

thanks for the quick response. My componenet is class component. Do you suggest to create a functional component and add taht in the class? Thanks Boopal

Yep thanks

-- Thanks Boopal