cascading dropdown is not working in react

cascading dropdown is not working in react - javascript

I am new to Reactjs and trying to implement cascading dropdowns so that when user select state he will be able to get corresponding cities in next dropdown.
Expected result : For state: Maharashtra -> Cities : Nagpur, Pune
This is my code
enter code here
import React from "react";
import { useState } from "react";
import "./Form.css";
import states from "./city-state";
function Form() {
const stateList = states;
let citiesList = [];
const [cities, setcities] = useState([]);
const [stateName, setStateName] = useState(states[0].state);
const [cityName, setCityName] = useState();
const getCities = (e) => {
console.log("state:" + e.target.value);
for (let i = 0; i < stateList.length; i++) {
if (stateList[i].state == "" + e.target.value)
citiesList = stateList[i].cities;
}
console.log("cityList:" + citiesList);
setcities(citiesList)
setStateName(e.target.value);
setCityName(citiesList[0].districts)
}
const refreshCityName = (e) =>{
setCityName(e.target.value);
}
return (
<div>
<section className="part cos-form">
<div className="boxx01">
<h2 className="h2-awards">FILL THE FORM</h2>
<h3 className="h3-awards">we will call you back</h3>
</div>
<form className="boxx02" onSubmit={handleSubmit}>
<div className="bpart1">
<input
type="text"
name="firstname"
placeholder="Name"
autoComplete="off"
onChange={handleChange}
/>{" "}
<p>{formErrors.username}</p>
<input
type="text"
name="email"
placeholder="Email"
autoComplete="off"
onChange={handleChange}
/>
<p>{formErrors.email}</p>
<input
type="tel"
name="mobileno"
placeholder="Mobile No."
autoComplete="off"
maxLength={10}
onChange={handleChange}
/>
<p>{formErrors.mobile}</p>
<span className="policy">
By clicking on Submit, I allow Lakmé Academy Powered by Aptech{" "}
<br /> to contact me, and use & share my personal data as per
the <br />
<a href="/privacy-policy" target="_blank" title="Privacy Policy">
Privacy Policy.
</a>
</span>
</div>
<div className="bpart2">
<select name="b_course_id">
<option selected="selected" value="">
Select Course Interested in
</option>
<option value="385">Short Term Courses</option>
<option value="414">Make-up</option>
<option value="468">Cosmetology</option>
<option value="527">Nail Art</option>
<option value="542">Hair</option>
<option value="559">Salon Management</option>
<option value="563">Beauty Therapy/Skin</option>
</select>
<select name="stateList" onChange={getCities}>
{stateList.map((e,key)=>{
return(
<option key ={key} value={e.state}>
{e.state}
</option>
)
})}
</select>
<select name="CityList" onChange={refreshCityName}>
{cities.map((e,key)=>{
return(
<option key ={key} value={e.name}>
{e.name}
</option>
)
})}
</select>
<button
disabled=""
className="black_btn btn"
name="student_enquiry_form_submit"
id="student_enquiry_form_submit"
type="button"
>
Submit
</button>
</div>
</form>
</section>
</div>
);
}
export default Form;
This is my structure of data in city-state.json. In this file, I have states names and districts name only.
{
"states": [
{
"state": "Andhra Pradesh",
"districts": [
"Anantapur",
"Chittoor"
]
}
}
please help me

Related

I can't change the state of the input tag when click on submit button and when it's empty of fill with text?

Here I built a form and I want, when I click on submit button if title part(input with id form-title) is empty border of the input gets a specific className but
It doesn't work
I uploaded an image and specify the submit button and input of title
My purpose is when I click on submit button the code must check the inside of the input tag(title) and if it's empty(I mean equal to "" ) the border of the input become red else become green
import { useState } from "react";
import "./tickets.css";
export default function Tickets() {
// States
const [toggle_new_ticket, setToggle_new_ticket] = useState(false);
const [form_title, set_form_title] = useState("");
const [form_unit, set_form_unit] = useState("");
const [form_explain, set_form_explain] = useState(false);
let [check, setCheck] = useState("");
// States functions
const form_checker = () => {
setCheck(() => {
if (form_title == "") {
check = false;
} else {
check = true;
}
console.log(check);
});
};
return (
<div className="tickets-container">
{/* New Ticket section */}
<div className="tickets-new-ticket-container">
{/* New Ticket Title */}
<div
className="tickets-new-ticket-title"
onClick={(e) => {
setToggle_new_ticket(!toggle_new_ticket);
}}
>
<div className="new-ticket-image">
<img src="https://img.icons8.com/external-tanah-basah-glyph-tanah-basah/48/000000/external-plus-user-interface-tanah-basah-glyph-tanah-basah-2.png" />
</div>
<div className="new-ticket-title">
<sapn> ثبت درخواست جدید</sapn>
</div>
</div>
{/* New Ticket Form */}
{toggle_new_ticket ? (
<div className="tickets-new-ticket-form-container">
{/* Form top container */}
<div className="tickets-new-ticket-form-top-container">
{/* Form title part */}
<div className="new-ticket-form-title">
<label htmlFor="form-title">عنوان</label>
<input
onChange={(e) => {
set_form_title(e.target.value);
}}
className={check ? "form-correct" : "form-alarm"}
type="text"
name="form-title"
id="form-title"
required
value={form_title}
title="عنوان مورد نظرتان را وارد کنید"
{...console.log(check)}
/>
<span>current state of title:{}</span>
</div>
{/* Form unit part */}
<div className="new-ticket-form-unit">
<label htmlFor="form-unit">واحد</label>
<select name="form-unit" id="form-unit" required>
<option value disabled selected className="form-unit-header">
واحد مورد نظر را انتخاب کنید
</option>
<option value="پیگیری سفارش">پیگیری سفارش</option>
<option value="احراز هویت"> احراز هویت</option>
<option value="مالی">مالی </option>
<option value="سایر">سایر </option>
</select>
</div>
</div>
{/* Form order part */}
<div className="new-ticket-form-order">
<label htmlFor="form-order">در خصوص سفارش</label>
<select name="form-order" id="form-order">
<option value="">هیچکدام</option>
</select>
</div>
{/* Form explain part */}
<div className="new-ticket-form-explain">
<label htmlFor="form-explain">توضیحات</label>
<textarea
name="form-explain"
id="form-explain"
cols="60"
rows="10"
value={form_explain}
onChange={(e) => {
set_form_explain(e.target.value);
}}
></textarea>
</div>
{/* ّForm upload file part */}
<div className="new-ticket-form-upload-file">
<label htmlFor="">فایل پیوست</label>
<label htmlFor="form-upload" className="form-upload">
<span>انتخاب فایل</span>
<img src="https://img.icons8.com/metro/20/000000/upload.png" />
</label>
<input type="file" name="form-upload" id="form-upload" />
<span className="form-upload-explain">
پسوندهای مجاز: jpg, jpeg, png, pdf, doc, docx, zip, rar حداکثر
حجم فایل 5 مگابایت
</span>
</div>
{/* Form submit btn */}
<div className="new-ticket-form-submit">
<input
type="submit"
name="form-submit"
id="form-submit"
value="ارسال درخواست"
onClick={() => {
form_checker();
}}
/>
</div>
</div>
) : (
""
)}
</div>
{/* Tickets log section */}
<div className="tickets-log-container"></div>
</div>
);}

Try like this
import React, { useState } from 'react';
import "./tickets.css";
export default function App() {
// States
const [toggle_new_ticket, setToggle_new_ticket] = useState(false);
const [form_title, set_form_title] = useState('');
const [form_unit, set_form_unit] = useState('');
const [form_explain, set_form_explain] = useState(false);
let [check, setCheck] = useState(false);
React.useEffect(() => {
if (form_title !== '') {
setCheck(true);
} else {
setCheck(false);
}
}, [form_title])
return (
<div className="tickets-container">
{/* New Ticket section */}
<div className="tickets-new-ticket-container">
{/* New Ticket Title */}
<div
className="tickets-new-ticket-title"
onClick={(e) => {
setToggle_new_ticket(!toggle_new_ticket);
}}
>
<div className="new-ticket-image">
<img src="https://img.icons8.com/external-tanah-basah-glyph-tanah-basah/48/000000/external-plus-user-interface-tanah-basah-glyph-tanah-basah-2.png" />
</div>
<div className="new-ticket-title">
<sapn> ثبت درخواست جدید</sapn>
</div>
</div>
{/* New Ticket Form */}
{toggle_new_ticket ? (
<div className="tickets-new-ticket-form-container">
{/* Form top container */}
<div className="tickets-new-ticket-form-top-container">
{/* Form title part */}
<div className="new-ticket-form-title">
<label htmlFor="form-title">عنوان</label>
<input
onChange={(e) => {
set_form_title(e.target.value);
}}
className={ check ? 'form-correct' : 'form-alarm'}
type="text"
name="form-title"
id="form-title"
required
value={form_title}
title="عنوان مورد نظرتان را وارد کنید"
{...console.log(check)}
/>
<span>current state of title:{}</span>
</div>
{/* Form unit part */}
<div className="new-ticket-form-unit">
<label htmlFor="form-unit">واحد</label>
<select
name="form-unit"
id="form-unit"
required
>
<option
value
disabled
selected
className="form-unit-header"
>
واحد مورد نظر را انتخاب کنید
</option>
<option value="پیگیری سفارش">
پیگیری سفارش
</option>
<option value="احراز هویت">
{' '}
احراز هویت
</option>
<option value="مالی">مالی </option>
<option value="سایر">سایر </option>
</select>
</div>
</div>
{/* Form order part */}
<div className="new-ticket-form-order">
<label htmlFor="form-order">در خصوص سفارش</label>
<select name="form-order" id="form-order">
<option value="">هیچکدام</option>
</select>
</div>
{/* Form explain part */}
<div className="new-ticket-form-explain">
<label htmlFor="form-explain">توضیحات</label>
<textarea
name="form-explain"
id="form-explain"
cols="60"
rows="10"
value={form_explain}
onChange={(e) => {
set_form_explain(e.target.value);
}}
/>
</div>
{/* ّForm upload file part */}
<div className="new-ticket-form-upload-file">
<label htmlFor="">فایل پیوست</label>
<label
htmlFor="form-upload"
className="form-upload"
>
<span>انتخاب فایل</span>
<img src="https://img.icons8.com/metro/20/000000/upload.png" />
</label>
<input
type="file"
name="form-upload"
id="form-upload"
/>
<span className="form-upload-explain">
پسوندهای مجاز: jpg, jpeg, png, pdf, doc, docx,
zip, rar حداکثر حجم فایل 5 مگابایت
</span>
</div>
{/* Form submit btn */}
<div className="new-ticket-form-submit">
<input
type="submit"
name="form-submit"
id="form-submit"
value="ارسال درخواست"
onClick={() => {
form_checker();
}}
/>
</div>
</div>
) : (
''
)}
</div>
{/* Tickets log section */}
<div className="tickets-log-container" />
</div>
);
}
Use UseEffect hook , when title was changed , it will be fire , and you can make a check is title empty or not , also not need use state callback for set check value.

how to get value from select2 in reactjs

I am using adminlte HTML theme, I converted this theme into reactjs, everything is working fine except select2(Multi-select)
onselect I am trying to trigger the handler that is userIdHandler but it does not trigger
There is two cases:
user name with multi-select : userIdHandler not working
Status with single select: userIdHandler working
please help me to trigger userIdHandler from multi-select also
import React, { useEffect, useState } from "react";
import { getTeam } from "../services/ApiCall/attendanceApiCall";
export default function TeamattendanceComponent() {
const [team, setTeam] = useState([]);
const userIdHandler = (e) => {
console.log("hi", e.target.value);
};
useEffect(() => {
const script = document.createElement("script");
script.src = "myjs/content.js";
script.async = true;
document.body.appendChild(script);
getTeam().then((res) => {
console.log(res.data);
setTeam(res.data);
});
}, []);
return (
<div className="content-wrapper">
{/* Content Header (Page header) */}
<div className="card">
<div className="card-body row">
<div className="col-4">
<div className="form-group ">
<label>User Name</label>
<select
id
className="form-control select2"
multiple="multiple"
data-placeholder="Select a State"
style={{ width: "100%" }}
onChange={userIdHandler}
>
{team.map((user, key) => {
console.log("team data", team);
return (
<option key={key} value={user._id}>
{user.name}
</option>
);
})}
</select>
</div>
</div>
<div className="col-4">
<div className="form-group">
<label>Status</label>
<select id className="form-control" onChange={userIdHandler}>
<option>Select</option>
<option>ON</option>
<option>OFF</option>
</select>
</div>
</div>
<div className="col-4">
<div className="form-group">
<label className="hidden-xs"> </label>
<input
type="submit"
className="btn btn-primary form-control"
defaultValue="Filter"
/>
</div>
</div>
</div>
</div>
{/* /.content */}
</div>
);
}

I'm afraid that you are not using a Select2 elements that's a regular select.
First install react-select: npm i --save react-select
This is how you define a multiselect on Select2:
import Select from 'react-select';
const options = [{label: "option 1", value: 1}, {label: "option 2", value: 2}];
<Select
isMulti
options={options}
onChange={userIdHandler}
/>
And then change your userIdHandler` function to this:
const userIdHandler = (value) => {
console.log(value);
};
This way it should print you the label and value selected.

Does react have a hook for listening for interactions on multiple inputs and updating that inputs relevant state using a setFoo( ) method

Is there a way to set multiple pieces of state with one event listener function.
I am trying to get information from the user that will update in real time other sections of my app. I am using the const [state, setState ] = useState() method.
I would like each input to fire a function off that will update the relevant parts of state but I can't work out how to do it.
import React, {useState} from 'react'
import { Container } from 'react-bootstrap'
const HBB = () => {
const [planName ,setPlanName ] = useState('')
const [planType ,setPlanType ] = useState('')
const [HBBInstallation ,setHBBInstallation ] = useState(false)
const [HBBInstallationActivationDate, setHBBInstallationActivationDate ] = useState()
const [HBBInstallationSlot , setHBBInstallationSlot ] = useState()
const [planOptions, setPlanOptions] = useState()
const [planMonthlyCost, setPlanMonthlyCost] = useState(0)
const handleChange = (e) => {
let proToUpdate = e.target.name;
let value = e.target.value;
let test = e.target.id;
//set the state of the element eg setPlanName(value)
}
return (
<Container>
<div>
<div className="form-group">
<select name="planName" id="setPlanName" value={planName} className="plan w-40" onChange={handleChange}>
<option value="*">Plan</option>
<option value="TEST">TEST</option>
</select>
<select name="planType" className="plan w-40" value={planType} onChange={handleChange}>
<option value="*">Standard</option>
<option value="pro">Pro</option>
<option value="extra">Extra</option>
</select>
</div>
<div className="form-group">
<label htmlFor="No">No Installation Needed</label>
<input name="HBBinstallation" id="No" type="radio" className="plan" value="No" checked onChange={handleChange}/>
<label htmlFor="Yes">Installation needed</label>
<input name="HBBinstallation" type="radio" className="plan" value="Yes"/>
</div>
<div className="form-group">
<input name="HBBInstallationActivationDate" type="text" className="textInput plan" value={HBBInstallationActivationDate} placeholder="Installation/Activation date" onChange={handleChange}/>
<select name="HBBinstallationSlot" className="plan">
<option value="*" defaultValue>Choose slot--</option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</div>
<div className="form-group">
<input name="planMonthlyCost" type="number" className="plan" value={planMonthlyCost} placeholder="Plan Monthly Cost" onChange={handleChange}/>
</div>
</div>
</Container>
)
}
export default HBB
Is it possible to pass the setState method through the onChange attr?
Will I need to write a function for each setState inputs?

If you use useReducer hook, you can handle multiple state easily like below code.
import React, { useReducer } from "react";
import { Container } from "react-bootstrap";
const useReducerState = (initialState = {}) => {
const reducer = (prev, next) => ({ ...prev, ...next });
return useReducer(reducer, initialState);
};
const HBB = () => {
const [state, setState] = useReducerState({
planName: "",
planType: "",
HBBInstallationActivationDate: 0,
HBBInstallation: false,
HBBInstallationSlot: [],
planOptions: [],
planMonthlyCost: 0
});
const handleChange = (e) => {
let proToUpdate = e.target.name;
let value = e.target.value;
let test = e.target.id;
setState({ [proToUpdate]: value });
};
const {
planName,
planType,
HBBInstallationActivationDate,
HBBInstallation,
HBBInstallationSlot,
planOptions,
planMonthlyCost
} = state;
return (
<Container>
<div>
<div className="form-group">
<select
name="planName"
id="setPlanName"
value={planName}
className="plan w-40"
onChange={handleChange}
>
<option value="*">Plan</option>
<option value="TEST">TEST</option>
</select>
<select
name="planType"
className="plan w-40"
value={planType}
onChange={handleChange}
>
<option value="*">Standard</option>
<option value="pro">Pro</option>
<option value="extra">Extra</option>
</select>
</div>
<div className="form-group">
<label htmlFor="No">No Installation Needed</label>
<input
name="HBBinstallation"
id="No"
type="radio"
className="plan"
value="No"
checked
onChange={handleChange}
/>
<label htmlFor="Yes">Installation needed</label>
<input
name="HBBinstallation"
type="radio"
className="plan"
value="Yes"
/>
</div>
<div className="form-group">
<input
name="HBBInstallationActivationDate"
type="text"
className="textInput plan"
value={HBBInstallationActivationDate}
placeholder="Installation/Activation date"
onChange={handleChange}
/>
<select name="HBBinstallationSlot" className="plan">
<option value="*" defaultValue>
Choose slot--
</option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</div>
<div className="form-group">
<input
name="planMonthlyCost"
type="number"
className="plan"
value={planMonthlyCost}
placeholder="Plan Monthly Cost"
onChange={handleChange}
/>
</div>
</div>
</Container>
);
};
export default HBB;
Then, you can use setState function for changing all the state values.
For using this method, you always have to set the initial value for the state.

min price and max price validation in reactjs form

I am creating a React Js website. Where I have a form with 2 select fields Min price and Max price. I want to apply validation on these two fields. So if user click minimum price of500 the maximum should only display 500 going up. My react component code is available below.
import React, { Component } from 'react';
import { Form, FormGroup, Input } from 'reactstrap';
class MyForm extends Component {
constructor(props) {
super(props);
this.state = {
};
}
handleSearch(event) {
alert("Search button clicked");
event.preventDefault();
}
render() {
return (
<div>
<header className="headerbg d-flex">
<div className="container my-auto">
<div className="row">
<div className="offset-1 col-10 offset-lg-0 col-lg-4">
<div id="search-form-div" className="container">
<div className="row">
<div className="col-12 my-4">
<h3>Search</h3>
<Form onSubmit={this.handleSearch}>
<FormGroup>
<Input type="select" name="select3" id="select3">
<option selected disabled>Min Price</option>
<option value="0">0</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
</Input>
</FormGroup>
<FormGroup>
<Input type="select" name="select4" id="select4">
<option selected disabled>Max Price</option>
<option value="0">0</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
</Input>
</FormGroup>
<FormGroup>
<Input type="submit" name="search" id="search" className="btn btn-primary" value="Search" />
</FormGroup>
</Form>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
);
}
}
export default MyForm;
Hope you understand my code. Thanks in advance.

The recommended way (and might I add, the cleaner way, is to place to option values in an array, which you commit to state and change whenever a value is changed). So your component might look something like this...
import React, { Component } from 'react';
import { Form, FormGroup, Input } from 'reactstrap';
const defaultValues = [
{ value: 0, text: 0, key: 1 },
{ value: 500, text: 500, key: 2 },
{ value: 1000, text: 1000, key: 3 },
{ value: 1500, text: 1500, key: 4 },
{ value: 2000, text: 2000, key: 5 }
];
const MIN_TITLE = { selected: true, disabled: true, text: 'Min Price' };
const MAX_TITLE = { selected: true, disabled: true, text: 'Max Price' };
class MyForm extends Component {
constructor(props) {
super(props);
this.state = {
minData: [MIN_TITLE, ...defaultValues],
maxData: [MAX_TITLE, ...defaultValues],
minValue: null,
maxValue: null
};
// This allows us to access the state inside the renderoptions function.
// Another way (if you want to ignore this line) is to write the renderOptions
// as renderOptions = data => {}
this.renderOptions = this.renderOptions.bind(this);
}
handleSearch(event) {
alert('Search button clicked');
event.preventDefault();
}
renderOptions(data) {
return data.map(datum => {
// this allows us to indicate whether we are selecting or disabling
const selected = datum.selected || false;
const disabled = datum.disabled || false;
return (
<option key={datum.key} value={datum.value} selected={selected} disabled={disabled}>
{datum.text}
</option>
);
});
}
// Writing your function so does not require the binding in the constructor
handleMinSelect = event => {
const value = event.target.value;
const newMaxValues = [];
defaultValues.forEach(datum => {
// I'm under the impression that reactstrap will change the value to string
if (datum.value >= Number.parseInt(value, 10)) {
newMaxValues.push(datum);
}
});
this.setState({
maxData: [MAX_TITLE, ...newMaxValues],
minValue: value
});
};
handleMaxSelect = event => {
const value = event.target.value;
this.setState({ maxValue: value });
};
render() {
// I'm stri
<div>
<header className="headerbg d-flex">
<div className="container my-auto">
<div className="row">
<div className="offset-1 col-10 offset-lg-0 col-lg-4">
<div id="search-form-div" className="container">
<div className="row">
<div className="col-12 my-4">
<h3>Search</h3>
<Form onSubmit={this.handleSearch}>
<FormGroup>
<Input
type="select"
name="select3"
id="select3"
value={this.state.minValue}
onChange={this.handleMinSelect}>
{this.renderOptions(this.state.minData)}
</Input>
</FormGroup>
<FormGroup>
<Input
type="select"
name="select4"
id="select4"
value={this.state.maxValue}
onChange={this.handleMaxSelect}>
{this.renderOptions(this.state.maxData)}
</Input>
</FormGroup>
<FormGroup>
<Input
type="submit"
name="search"
id="search"
className="btn btn-primary"
value="Search"
/>
</FormGroup>
</Form>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>;
}
}
export default MyForm;
Basically, the major changes are
Set the values in state and render them using the renderOptions
When a new state pops up, change the value and update the maxData property
Hope it helps you out 😉

you need to add an onChange function to your Inputs. Then update the state when the minValue input is selected. When this is the max, compare the selected value with the minValue in the state and reject it when less than the
I would do another logic if had to do this kind of form anyway. I would create the option list for maxValue dynamicaly based on the choice for minValue. I would display only the values greater than the min. I guess this is more convenient for user.

React - How to get input from looped <form>?

I am new on React.
I have a condition which is to loop the form, please help me
Here is the code:
this.state.products.map(product => {
<form onSubmit={this.handleSubmit}>
<select name="size" className="form-control" style={{height: '46px;'}}>
<option key="1" value="1">Red</option>
<option key="2" value="2">Yellow</option>
<option key="3" value="3">Green</option>
</select>
<input type="submit" value="Pick This" className="form-control" onClick={() => this.handleSubmit} />
</form>
});
If there was 3 form, how to get the selected value from clicked submit button form?
Or is there another simple way?
Thank you

One method would be changing how your onSubmit function is handled.
So you could pass which index of products you are submitting like so
this.state.products.map((product, i) => {
<form onSubmit={event => this.handleSubmit(event, i)}>
<select name="size" className="form-control" style={{height: '46px;'}}>
<option key="1" value="1">Red</option>
<option key="2" value="2">Yellow</option>
<option key="3" value="3">Green</option>
</select>
<input type="submit" value="Pick This" className="form-control" onClick={() => this.handleSubmit} />
</form>
});
It also looks like your form is uncontrolled, which another possibly is having the select change a value in state.
<select name="size" onChange={e => this.handleChange(e, i)} className="form-control" style={{height: '46px;'}}>
<option key="1" value="1">Red</option>
<option key="2" value="2">Yellow</option>
<option key="3" value="3">Green</option>
</select>
and in your handleChange, you would change a value in state that would correspond to the product from your state.

You can use a ref to get form values from the DOM.
Here you need one ref per product, so you could use the index of product to save the ref and also to submit de form.
class Example extends Component {
constructor(props) {
super(props);
this.state = {
products: [],
};
this.selectByProduct = {};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event, productIndex) {
event.preventDefault();
const size = this.selectByProduct[productIndex].value;
console.log(`you submitted the size ${size} of product ${productIndex}`)
}
render() {
return this.state.products.map((product, i) => (
<form onSubmit={event => this.handleSubmit(event, i)}>
<select ref={select => this.selectByProduct[i] = select} name="size" className="form-control" style={{height: '46px;'}}>
<option key="1" value="1">Red</option>
<option key="2" value="2">Yellow</option>
<option key="3" value="3">Green</option>
</select>
<input type="submit" value="Pick This" className="form-control" />
</form>
));
}
}

Develop Reference

JavaScript is the programming language of the Web.

cascading dropdown is not working in react - javascript

Related

I can't change the state of the input tag when click on submit button and when it's empty of fill with text?

how to get value from select2 in reactjs

Does react have a hook for listening for interactions on multiple inputs and updating that inputs relevant state using a setFoo( ) method

min price and max price validation in reactjs form

React - How to get input from looped <form>?

Categories

Resources