How to merge/join two components Parent/Child state react

How to merge/join two components Parent/Child state react - javascript

A newbie plight to how to handle/merge state. I have an inventory UI I'm trying to create, what I want to achieve is this, every time a new item gets added to ItemVariation, it appends to the Item component. I'm using a Django backend not that it matters but I want to add ItemVaration as a reverse relation to Item Table.
something like this.
state = [{Item},[{ItemVariation}, {ItemVariation}]]
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ItemVariation from './ItemVariation';
export const Item = (props) => {
const fetchCategory = 'http://localhost:8000/api/product/categories/'
const fetchManufacturer = 'http://localhost:8000/api/product/manufacturers/'
const fetchBranch = 'http://localhost:8000/api/users/branch/'
const [manufacturer, setManufacturer] = useState([])
const [categories, setCategories] = useState([])
const [branch, setBranch] = useState([])
const [item, setItem] = useState({
name: '',
category: categories,
branch: branch,
manufacturer: manufacturer,
has_size: false,
})
useEffect(() => {
const cat = axios.get(fetchCategory);
const man = axios.get(fetchManufacturer);
const bra = axios.get(fetchBranch);
axios.all([cat, man, bra]).then(axios.spread((...responses) => {
setCategories(responses[0].data)
setManufacturer(responses[1].data)
setBranch(responses[2].data)
// use/access the results
})).catch(errors => {
// react on errors.
console.log(errors)
})
}, [])
return (
<div>
<div>
<label htmlFor="name">Name: </label>
<input type="text" id="name" name="name" />
</div>
<div>
<label htmlFor="category">Categories: </label>
<select name="category" id="category" >
{categories.map((category, index)=>(
<option key={index} value={category.id}>{category.name}</option>
))}
</select>
</div>
<div>
<label htmlFor="category">Manufacturer: </label>
<select name="category" id="category" >
{manufacturer.map((man, index)=>(
<option key={index} value={man.id}>{man.name}</option>
))}
</select>
</div>
<div>
<label htmlFor="category">Branch: </label>
<select name="branch" id="branch" >
{branch.map((bra, index)=>(
<option key={index} value={bra.id}>{bra.name}</option>
))}
</select>
</div>
<div>
<div>
<label htmlFor="has_size">Has Size: </label>
<input type="radio" id="has_size" name="has_size" />
</div>
</div>
<hr/>
{JSON.stringify(item, null, 2)}
<ItemVariation />
</div>
import React, { useState } from 'react'
function ItemVariation(props) {
const fields = {
default_product_variation: '',
color: '',
price: '',
quantity: '',
model_number: '',
sku: '',
barcode: '',
product_condition: '',
size: '',
extra_information: ''
}
const [variations, setVariations] = useState([fields])
const handleAddItem = () => {
setVariations([...variations, fields])
}
return (
<div>
{variations.map((variation, index) => (
<div key={index}>
<div>
<label htmlFor="default_product_variation">Make default: </label>
<input type="radio" id="default_product_variation" name="default_product_variation" />
</div>
<div>
<label htmlFor="color">Color: </label>
<input type="text" id="color" name="color" />
</div>
<div>
<label htmlFor="price">Price: </label>
<input type="number" id="price" name="price" />
</div>
<div>
<label htmlFor="wholesale_price">Wholesale Price: </label>
<input type="number" id="wholesale_price" name="wholesale_price" />
</div>
<div>
<label htmlFor="quantity">Quantity: </label>
<input type="number" id="quantity" name="quantity" />
</div>
<div>
<label htmlFor="model_number">Model Number: </label>
<input type="text" id="model_number" name="model_number" />
</div>
<div>
<label htmlFor="sku">SKU: </label>
<input type="text" id="sku" name="sku" />
</div>
<div>
<label htmlFor="barcode">Barcode: </label>
<input type="text" id="barcode" name="barcode" />
</div>
<div>
<div>
<label htmlFor="product_condition">Condition: </label>
<select name="product_condition" id="product_condition">
<option value="1">New</option>
<option value="2">Refurbished</option>
<option value="3">Repurposed</option>
</select>
</div>
</div>
<div>
<label htmlFor="size">Size: </label>
<input type="text" id="size" name="size" />
</div>
<div>
<label htmlFor="extra_information">Extra Information: </label>
<textarea id="extra_information" name="extra_information"></textarea>
</div>
<hr />
</div>
))}
<button type="button" onClick={handleAddItem}>Add Another Item</button>
{JSON.stringify(variations, null, 2)}
</div>
)
}
export default ItemVariation
How do I approach this?

Related

setFirstName() is not a function, and returns undefined

I am working on a full stack application using react, and I am creating a website that adds a user to the database, I am using a class based component:
PersonalDetails.js
import styles from "../styles/style.module.css";
import { Component } from "react";
class PersonalDetails extends Component {
constructor({
firstName,
setFirstName,
lastName,
setLastName,
username,
setUsername,
mobile,
setMobile,
email,
setEmail,
preferedLanguage,
setPreferedLanguage,
}) {
super({
firstName,
setFirstName,
lastName,
setLastName,
username,
setUsername,
mobile,
setMobile,
email,
setEmail,
preferedLanguage,
setPreferedLanguage,
});
}
handleFnameChange = (event) => {
this.props.setFirstName(event.target.value);
console.log(this.props.setFirstName);
console.log(this.firstName);
};
handleLnameChange = (event) => {
this.setLastName(event.target.value);
};
handleUnameChange = (event) => {
this.setUserName(event.target.value);
};
handleMobileChange = (event) => {
this.setMobile(event.target.value);
};
handleEmailChange = (event) => {
this.setEmail(event.target.value);
};
handleLanguageChange = (event) => {
this.setPreferedLanguage(event.target.value);
};
render() {
return (
<div>
<div className={styles.sectionTitle}>
<h3>Personal Details</h3>
<hr></hr>
</div>
<div className={styles.doubleContainer}>
<div className={styles.inputlabelContainer}>
<label for="fname" className={styles.personalDetailsLabel}>
First Name
<span className={styles.star}>*</span>
</label>
<input
id="fname"
value={this.firstName}
onChange={this.handleFnameChange}
className={styles.personalDetailsInput}
type="text"
placeholder="Enter First Name"
required
></input>
</div>
<div className={styles.inputlabelContainer}>
<label for="lname" className={styles.personalDetailsLabel}>
Last Name
<span className={styles.star}>*</span>
</label>
<input
id="lname"
value={this.lastName}
onChange={this.handleLnameChange}
className={styles.personalDetailsInput}
type="text"
placeholder="Enter Last Name"
required
></input>
</div>
</div>
<div className={styles.doubleContainer}>
<div className={styles.inputlabelContainer}>
<label for="uname" className={styles.personalDetailsLabel}>
User Name
<span className={styles.star}>*</span>
</label>
<input
id="uname"
value={this.username}
onChange={this.handleUnameChange}
className={styles.personalDetailsInput}
type="text"
placeholder="Enter User Name"
required
></input>
</div>
<div className={styles.inputlabelContainer}>
<label for="mobilenb" className={styles.personalDetailsLabel}>
Mobile Number
<span className={styles.star}>*</span>
</label>
<input
id="mobilenb"
value={this.mobile}
onChange={this.handleMobileChange}
className={styles.personalDetailsInput}
type="tel"
placeholder="Enter Mobile Number"
required
></input>
</div>
</div>
<div className={styles.doubleContainer}>
<div className={styles.inputlabelContainer}>
<label for="email" className={styles.personalDetailsLabel}>
Email
<span className={styles.star}>*</span>
</label>
<input
id="email"
value={this.email}
onChange={this.handleEmailChange}
className={styles.personalDetailsInput}
type="email"
placeholder="Enter Email Address"
required
></input>
</div>
<div className={styles.inputlabelContainer}>
<label for="piflanguage" className={styles.personalDetailsLabel}>
Preferred Interface Language
<span className={styles.star}>*</span>
</label>
<select
id="piflanguage"
value={this.preferedLanguage}
onChange={this.handleLanguageChange}
className={styles.inputlabelContainer}
>
<option value="English">English</option>
<option value="Arabic">Arabic</option>
<option value="French">French</option>
</select>
</div>
</div>
</div>
);
}
}
export default PersonalDetails;
Explanation:
When I use this.setFirstName in the handleFnameChange() I get the error that this.setFirstName() is not a function, and when I use this.props.setFirstName() I get the result of firstName as undefined, the same for all other functions(setLastName, setMobile...)
What's the problem?

React Hook Form: How to reset the form content after submission

I have a hidden field when you clicked the YES option, I want to reset the form to hide again the field after successful submission.
Below is my code and here is the link to sandbox.
import { React, useState } from "react";
import emailjs from "emailjs-com";
import { useForm } from "react-hook-form";
const NameForm = () => {
const [showYes, setShowYes] = useState(false);
const {
register,
handleSubmit,
reset,
formState: { errors }
} = useForm({
defaultValues: { yes_no: false, yes_i_understand: false }
});
const sendEmail = formData => {
emailjs
.send("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", formData, "YOUR_USER_ID")
.then(
result => {
console.log(result.text);
},
error => {
console.log(error.text);
}
);
reset();
};
return (
<div>
<h1 className="text-center text-md-left mb-3">Get in Touch</h1>
<p>Have you spoken to a us in the last 14 days?</p>
<form className="contact-form" onSubmit={handleSubmit(sendEmail)}>
<div className="mb-2">
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
value="Yes"
id="yes"
name="yes_no"
onClick={setShowYes}
/>
<label className="form-check-label mr-4" htmlFor="yes">
Yes
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
value="No"
id="no"
name="yes_no"
defaultChecked
onClick={() => setShowYes(false)}
/>
<label className="form-check-label mr-4" htmlFor="no">
No
</label>
</div>
</div>
{showYes && (
<div className="form-group row mb-0">
<div className="col-12 py-3">
<input
type="text"
className="form-control custom--fields-mod text-the-primary"
id="agentName"
placeholder="Agent Name *"
name="agent_name"
{...register("agent_name", { required: true })}
/>
{errors.agent_name && (
<span className="invalid-feedback d-block">
Please fill out this field.
</span>
)}
</div>
</div>
)}
<div className="form-group mb-0 py-3">
<textarea
className="form-control custom--fields-mod text-the-primary"
id="message"
rows="3"
placeholder="Message *"
name="message"
{...register("message", { required: true })}
></textarea>
{errors.message && (
<span className="invalid-feedback d-block">
Please fill out this field.
</span>
)}
</div>
<div className="form-group row py-2 mb-0">
<div className="col-12 text-center text-md-left py-2 py-md-0">
<input
className="buttons-width float-md-right btn btn-dark-moderate-orange rounded-0"
type="submit"
value="SEND MESSAGE"
/>
</div>
</div>
</form>
</div>
);
};
export default NameForm;
I'm not sure if I missed something on passing the data to the form. I also put defaultChecked attribute in option NO.

The 'showYes' state should be reset to false after submission.
I updated some codes.
https://codesandbox.io/s/react-hook-form-using-emailjs-2-forked-fmido?file=/src/App.js
const resetForm = () => {
reset();
setShowYes(false);
};
const sendEmail = (formData) => {
emailjs
.send("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", formData, "YOUR_USER_ID")
.then((result) => {
console.log(result.text);
resetForm();
},
(error) => {
console.log(error.text);
}
);
};
I'm not sure if I missed something on passing the data to the form. I also put defaultChecked attribute in option NO.
<input
className="form-check-input"
type="radio"
value="true"
id="yes"
name="yes_no"
{...register("yes_no", { required: true })}
onClick={setShowYes}
/>
<label className="form-check-label mr-4" htmlFor="yes">
Yes
</label>

React-select cannot read property value of undefined

I'm trying to implement 'react-select' but I am getting a 'TypeError: Cannot read property 'value' of undefined'. I am using react and react hooks. Although the demo usage uses a class component I am using a function component in this case. What am I doing wrong and how can I fix this?
job_req_titles is an object array with titles label: and value:
https://github.com/JedWatson/react-select
import React, { useState } from 'react';
import Select from 'react-select';
export default function CandidateForm({ handleCreate, job_req_titles }) {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [facebook, setFacebook] = useState('');
const [github, setGithub] = useState('');
const [linkedin, setLinkedin] = useState('');
const [jobTitle, setJobTitle] = useState('');
const [company, setCompany] = useState('');
const [appJobReq, setAppJobReq] = useState('');
const prepareCandidateObj = () => {
// Prepare the candidate object
let candidate = {
name,
email,
phone,
facebook,
github,
linkedin,
jobTitle,
company,
appJobReq,
};
console.log(candidate);
// Pass in the postNewCandidate from the parent component
// to be called in this component
handleCreate(candidate);
// alert('Candidate Submitted!');
};
return (
<div className='container'>
<div className='row'>
<label className='name'>Name</label>
</div>
<div className='row'>
<input
className='name-input'
type='text'
placeholder='Carol Caroller'
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className='row'>
<label className='email'>Email</label>
</div>
<div className='row'>
<input
className='email-input'
placeholder='example#email.com'
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className='row'>
<label className='phone'>Phone</label>
</div>
<div className='row'>
<input
className='phone-input'
placeholder='(201) 534 2233'
value={phone}
onChange={(e) => setPhone(e.target.value)}
/>
</div>
<div className='row'>
<label className='facebook'>Facebook</label>
</div>
<div className='row'>
<input
className='facebook-input'
placeholder='https://www.facebook.com/DilaonRion/'
value={facebook}
onChange={(e) => setFacebook(e.target.value)}
></input>
</div>
<div className='row'>
<label className='linkedin'>Linkedin</label>
</div>
<div className='row'>
<input
className='linkedin-input'
placeholder='https://www.linkedin.com/DillonRion/'
value={linkedin}
onChange={(e) => setLinkedin(e.target.value)}
></input>
</div>
<div className='row'>
<label className='github'>Github</label>
</div>
<div className='row'>
<input
className='github-input'
placeholder='https://www.github.com/DilonRion/'
value={github}
onChange={(e) => setGithub(e.target.value)}
></input>
</div>
<div className='row'>
<label className='job-title'>Job Title</label>
</div>
<div className='row'>
<input
className='job-title-input'
type='text'
placeholder='Frontend Developer'
value={jobTitle}
onChange={(e) => setJobTitle(e.target.value)}
></input>
</div>
<div className='row'>
<label className='current-company'>Current Company Name</label>
</div>
<div className='row'>
<input
className='current-company-input'
type='text'
placeholder='Obrien LLC'
value={company}
onChange={(e) => setCompany(e.target.value)}
></input>
</div>
<div className='row'>
<label className='job-req'>Applicant Job Req</label>
</div>
<div className='row'>
<div className='job-req-input'>
<Select
className='job-req-select'
value={appJobReq}
onChange={(e) => setAppJobReq(e.target.value)}
options={job_req_titles}
isMulti
/>
</div>
</div>
{/* <div className='row'>
<label className='cv'>CV</label>
</div> */}
<div className='row'>
<label className='applied'>Applied or Sourced</label>
<select className='applied-input'>
<option disabled defaultValue>
--
</option>
<option value='1'>Applied</option>
<option value='0'>Sourced</option>
</select>
</div>
<button className='create-button' onClick={prepareCandidateObj}>
Create
</button>
</div>
);
}

adding this fixed the error.
const handleChange = (selectedOption) => {
setAppJobReq(selectedOption);
console.log(`Option selected:`, selectedOption);
};
<div className='job-req-input'>
<Select
className='job-req-select'
value={appJobReq}
onChange={handleChange}
options={job_req_titles}
isMulti
classNamePrefix='select'
/>
</div>

A component is changing an uncontrolled input of type text to be controlled?

At the moment I try to write in the form and save it in the state, I get this error:
Warning: A component is changing an uncontrolled input of type text to
be controlled. Input elements should not switch from uncontrolled to
controlled (or vice versa). Decide between using a controlled or
uncontrolled input element for the lifetime of the component.
import React from 'react';
class ExerciseNew extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state)
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
render() {
return (
<div className="container">
<form
onSubmit={this.handleSubmit}
>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="title"
name="title"
onChange={this.handleChange}
value={this.state.title}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="description"
name="description"
onChange={this.handleChange}
value={this.state.description}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="img"
name="img"
onChange={this.handleChange}
value={this.state.img}
/>
</div>
<div className="form-row">
<div className="col">
<input
type="text"
className="form-control"
placeholder="leftColor"
name="leftColor"
onChange={this.handleChange}
value={this.state.leftColor}
/>
</div>
<div className="col">
<input
type="text"
className="form-control"
placeholder="rightColor"
name="rightColor"
onChange={this.handleChange}
value={this.state.rightColor}
/>
</div>
</div>
<button
type="submit"
className="btn btn-primary"
>
Submit
</button>
</form>
</div>
)
}
}
export default ExerciseNew;
I find it curious because I am following the documentation of react, along with this video in Spanish.
I tried using babeljs and the features of ES7 so as not to have to create the constructor, so I did something like this:
import React from 'react';
class ExerciseNew extends React.Component {
state = {}
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state)
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
render() {
return (
<div className="container">
<form
onSubmit={this.handleSubmit}
>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="title"
name="title"
onChange={this.handleChange}
value={this.state.title}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="description"
name="description"
onChange={this.handleChange}
value={this.state.description}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="img"
name="img"
onChange={this.handleChange}
value={this.state.img}
/>
</div>
<div className="form-row">
<div className="col">
<input
type="text"
className="form-control"
placeholder="leftColor"
name="leftColor"
onChange={this.handleChange}
value={this.state.leftColor}
/>
</div>
<div className="col">
<input
type="text"
className="form-control"
placeholder="rightColor"
name="rightColor"
onChange={this.handleChange}
value={this.state.rightColor}
/>
</div>
</div>
<button
type="submit"
className="btn btn-primary"
>
Submit
</button>
</form>
</div>
)
}
}
export default ExerciseNew;
and still I get the same error.

Your form is already a controlled components.
You are getting warning beacuse, you have not initialized your state. You need to have each variable in state like,
this.state = {
title: '',
description: '',
img: '',
leftColor: '',
rightColor: ''
}
Note: A you are already using arrow function for handleSubmit & handleChange, you don't need to bind them in constructor,
this.handleChange = this.handleChange.bind(this); //not needed
this.handleSubmit = this.handleSubmit.bind(this); //not needed
Live Example:
class ExerciseNew extends React.Component {
constructor(props) {
super(props);
this.state = {
title: "",
description: "",
img: "",
leftColor: "",
rightColor: "",
};
}
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state)
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
render() {
return (
<div className="container">
<form
onSubmit={this.handleSubmit}
>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="title"
name="title"
onChange={this.handleChange}
value={this.state.title}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="description"
name="description"
onChange={this.handleChange}
value={this.state.description}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
placeholder="img"
name="img"
onChange={this.handleChange}
value={this.state.img}
/>
</div>
<div className="form-row">
<div className="col">
<input
type="text"
className="form-control"
placeholder="leftColor"
name="leftColor"
onChange={this.handleChange}
value={this.state.leftColor}
/>
</div>
<div className="col">
<input
type="text"
className="form-control"
placeholder="rightColor"
name="rightColor"
onChange={this.handleChange}
value={this.state.rightColor}
/>
</div>
</div>
<button
type="submit"
className="btn btn-primary"
>
Submit
</button>
</form>
</div>
)
}
}
ReactDOM.render(
<ExerciseNew/>,
document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.development.js"></script>

Cannot read property 'params' of undefined

I am trying to edit data in database using fetch but it shows cannot read property 'params' of undefined error where i am fetching it will not get that id using this.props.match.params.id
here is my action
const reportsFetched = (reports,r_id) => {
return {
type: 'REPORTS_FETCHED',
reports,
r_id
}
}
export const fetchReportsbyid = (r_id) => {
return dispatch => {
fetch(`http://localhost/aruna/getreportsbyid.php?r_id=${r_id}`).
then(resp => resp.json()).
then(data => dispatch(reportsFetched(data.reports)));
}
}
my reducer file
export default (state=reportsDefaultstate, action ) => {
switch (action.type){
case 'ADD_REPORT':
return [
...state,
action.reports
]
case 'REPORTS_FETCHED':
const index = state.findIndex(item => item.r_id === action.reports.r_id);
if(index > -1){
return state.map((item) => {
if(item.r_id === action.reports.r_id) return action.reports
return item
})
}else{
return [...state]
}
case 'SET_REPORTS':
return action.reports
default:
return state
}
}
my listitem
const Reportlistitem = ({r_id, reg_date, reg_no, patient_name, gender, age, mobile_no , email_id , refer_by, test_request , report_status , total_amt, receipt_amt, bal_amt}) => (
<div >
<table>
<tbody key={r_id}>
<tr>
<td>{reg_date}</td>
<td>{reg_no}</td>
<td>{patient_name}</td>
<td>{gender}</td>
<td>{age}</td>
<td>{mobile_no}</td>
<td>{email_id}</td>
<td>{refer_by}</td>
<td>{test_request}</td>
<td>{report_status}</td>
<td>{total_amt}</td>
<td>{receipt_amt}</td>
<td>{bal_amt}</td>
<td><Link to={`/edit/${r_id}`} r_id={r_id} className="btn-floating btn-large blue"><i class="large material-icons">edit</i></Link></td>
<td><button className="btn-floating btn-large red"><i class="large material-icons">delete</i></button></td>
</tr>
</tbody>
</table>
</div>
)
export default connect()(Reportlistitem)
this is my form where this error is occured
import React from 'react'
import {connect} from 'react-redux';
import {fetchReportsbyid} from '../actions/reports'
class ReportForm extends React.Component{
constructor(props){
super(props);
}
state = {
r_id:this.props.report ? this.props.report.r_id :0,
reg_date:this.props.report ? this.props.report.reg_date :'',
reg_no:this.props.report ? this.props.report.reg_no:'',
patient_name:this.props.report ? this.props.report.patient_name:'',
gender:this.props.report ? this.props.report.gender:'',
age:this.props.report ? this.props.report.age:'',
mobile_no:this.props.report ? this.props.report.mobile_no:'',
email_id:this.props.report ? this.props.report.email_id:'',
refer_by:this.props.report ? this.props.report.refer_by:'',
test_request:this.props.report ? this.props.report.test_request:'',
report_status:this.props.report ? this.props.report.report_status:'',
total_amt:this.props.report ? this.props.report.total_amt:'',
receipt_amt:this.props.report ? this.props.report.receipt_amt:'',
bal_amt:this.props.report ? this.props.report.bal_amt:''
}
componentDidMount = () => {
if(this.props.match.params.r_id){
this.props.fetchReportsbyid(this.props.match.params.r_id)
}
}
handleChange = (e) => {
this.setState({[e.target.name]:e.target.value})
console.log(this.state)
}
onSubmit = (e) => {
e.preventDefault();
this.props.onSubmit({
reg_date:this.state.reg_date,
reg_no:this.state.reg_no,
patient_name:this.state.patient_name,
gender:this.state.gender,
age:this.state.age,
mobile_no:this.state.mobile_no,
email_id:this.state.email_id,
refer_by:this.state.refer_by,
test_request:this.state.test_request,
report_status:this.state.report_status,
total_amt:this.state.total_amt,
receipt_amt:this.state.receipt_amt,
bal_amt:this.state.bal_amt,
done:this.state.done
})
}
render(){
return(
<div className="row">
<form onSubmit={this.onSubmit} className="col s12">
<div className="row">
<div className="input-field col s4">
<input id="reg_date" name="reg_date" type="date" className="validate" onChange={this.handleChange} />
</div>
<div className="input-field col s4">
<input id="reg_no" name="reg_no" type="text" className="validate" onChange={this.handleChange}/>
<label for="reg_no">Registration no</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<input id="patient_name" name="patient_name" type="text" className="validate" onChange={this.handleChange} />
<label for="patient_name">Patient Name</label>
</div>
<div className="input-field col s4">
<input id="gender" name="gender" type="text" className="validate" onChange={this.handleChange}/>
<label for="gender">Gender</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<input id="age" name="age" type="text" className="validate" onChange={this.handleChange} />
<label for="age">Age</label>
</div>
<div className="input-field col s4">
<input id="refer_by" name="refer_by" type="text" className="validate" onChange={this.handleChange}/>
<label for="refer_by">Refer by</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<input id="mobile_no" name="mobile_no" type="text" onChange={this.handleChange}/>
<label for="mobile_no">Mobile Number</label>
</div>
<div className="input-field col s4">
<input id="email_id" name="email_id" type="email" onChange={this.handleChange} />
<label for="email_id">Email Id</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<input id="test_rquest" name="test_request" type="text" className="validate" onChange={this.handleChange}/>
<label for="test_rquest">Test Requested</label>
</div>
<div className="input-field col s4">
<input id="report_status" name="report_status" type="text" className="validate" onChange={this.handleChange}/>
<label for="report_status">Report Status</label>
</div>
</div>
<div className="row">
<div className="input-field col s2">
<input id="total_amt" name="total_amt" type="text" className="validate" onChange={this.handleChange}/>
<label for="total_amt">Total Amount</label>
</div>
<div className="input-field col s2">
<input id="receipt_amt" name="receipt_amt" type="text" className="validate" onChange={this.handleChange}/>
<label for="receipt_amt">Receipt Amount</label>
</div>
<div className="input-field col s2">
<input id="bal_amt" type="text" name="bal_amt" className="validate" onChange={this.handleChange}/>
<label for="bal_amt">Balance Amount</label>
</div>
</div>
<div className="input-field col 26">
<input type="submit" className="btn waves-effect waves-light" value="Save Report"/>
</div>
</form>
</div>
)
}
}
export default connect()(ReportForm)
please help he to figure it out whats the error here
my router file code is this whats the issue with this
import React from 'react'
import {BrowserRouter, Route, Switch, Link,NavLink} from 'react-router-dom'
import Dashboard from '../components/reportdashboard'
import Createreport from '../components/addreport'
import Editreport from '../components/editreport'
import Notfound from '../components/notfound'
import Header from '../components/header'
import Footer from '../components/footer'
const AppRouter = () => (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" component={ Dashboard } exact={true} />
<Route path="/create" component={ Createreport } />
<Route path="/edit/:r_id" component={ Editreport } />
<Route component={ Notfound }/>
</Switch>
<Footer />
</div>
</BrowserRouter>
)
export default AppRouter

We Keep Coding

JavaScript is the programming language of the Web.

How to merge/join two components Parent/Child state react - javascript

Related

setFirstName() is not a function, and returns undefined

React Hook Form: How to reset the form content after submission

React-select cannot read property value of undefined

A component is changing an uncontrolled input of type text to be controlled?

Cannot read property 'params' of undefined

Categories

Resources