<select class="custom-select"
onChange={(e) => this.subCategory(e)}>
<option hidden value="">
Select Subcategory
</option>
{subcategoryConst}
Option are from API Mapping
const subcategoryConst =
this.state.subcategory.map((Data) => {
console.log("Data", Data.student_name);
return (
<>
<option value={Data.id}>{Data.start_surah} <br/>{Data.end_surah}</option>
</>
);
});
Can not Use <br/ tag and also not /n is working
Related
I am pretty new to web development, I want to be able to retrieve the value in the select that is selected in the below code, but I am unable to.
I want to get it in a variable in order to send it using api. I am able to open the dropdown meni and able to
import {useHistory} from 'react-router-dom'
import { useForm, FormActions } from '../../context/FormContext'
import { Theme } from '../../components/Theme/intex'
import { ChangeEvent, useEffect } from 'react'
export const FormStep1 = () => {
const history = useHistory()
const { state, dispatch} = useForm()
const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
dispatch({
type: FormActions.setName,
payload: e.target.value
})
}
const handleNextStep = () =>{
if(state.name !== '') {
history.push('/step2')
} else{
alert('Please enter your details')
}
state.team = 'test'
}
useEffect(()=>{
dispatch({
type: FormActions.setCurrentStep,
payload: 1
})
},[])
return(
<Theme>
<C.Container>
<p className='Step'>Step 1/3</p>
<h2>Team Name</h2>
<p>Select Existing Team or Create a New Team</p>
<label> Select your team_usecase </label>
<select name="pets" id="pet-select">
<option value=""> Select your team </option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="hamster">hamster</option>
<option value="parrot">parrot</option>
<option value="spider">spider</option>
<option value="goldfish">Goldfish</option>
</select>
)
}```
I was able to find a few solutions but I couldn't get them to work, so any help would be appreciated.
You can achieve this by putting onChange handler on select like this:
return(
<Theme>
<C.Container>
<p className='Step'>Step 1/3</p>
<h2>Team Name</h2>
<p>Select Existing Team or Create a New Team</p>
<label> Select your team_usecase </label>
<select name="pets" id="pet-select" onChange=(e => handleNameChange(e))>
<option value=""> Select your team </option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="hamster">hamster</option>
<option value="parrot">parrot</option>
<option value="spider">spider</option>
<option value="goldfish">Goldfish</option>
</select>
</C.Container>
</Theme>
)
I am adding a component to the dom based on the button click.
<button onClick={() => addQuestion("Template 1")}> Template 1 </button>
<button onClick={() => addQuestion("Template 2")}> Template 3 </button>
<button onClick={() => addQuestion("Template 3")}> Template 3 </button>
Also I have a select tag with the same value as button. If the user wish to change the type of, the option component will change.
<select id="q-type" onChange={(e)=>ChangeQType(e)}>
<option value="Template 1">Template 1</option>
<option value="Template 2">Template 2</option>
<option value="Template 3">Template 3</option>
</select>
What is working : If I change the value in select tag the expected component renders.
What is not working : If I press a button , the expected components renders but the order of the dropdown is not changing. I need the rendered component value on top of the dropdown.
If I press Template 2 button I need in this order
<select id="q-type" onChange={(e)=>ChangeQType(e)}>
<option value="Template 2">Template 2</option>
<option value="Template 1">Template 1</option>
<option value="Template 3">Template 3</option>
</select>
What i get :
<select id="q-type" onChange={(e)=>ChangeQType(e)}>
<option value="Template 1">Template 1</option>
<option value="Template 2">Template 2</option>
<option value="Template 3">Template 3</option>
</select>
you need to first remove item from array and again place it in first. Here, I have place data on state hook. It would be easier to understand.
import React, { useState } from 'react';
function App() {
const [templates, setTemplates] = useState(['Template 1', 'Template 2', 'Template 3']);
const addQuestion = (item) => {
let clone = [...templates];
let objIndex = clone.indexOf(item);
clone.splice(objIndex, 1);
setTemplates([item, ...clone]);
}
const ChangeQType = () => {
}
return (
<div className="App">
<button onClick={() => addQuestion("Template 1")}> Template 1 </button>
<button onClick={() => addQuestion("Template 2")}> Template 2 </button>
<button onClick={() => addQuestion("Template 3")}> Template 3 </button>
<hr />
<select id="q-type" onChange={(e) => ChangeQType(e)}>
{templates.map((item) => <option value={item}>{item}</option>)}
</select>
</div>
);
}
export default App;
I have 3 selection boxes which called paymentStatus, orderStatus, deliveryStatus and those will update my database with values in options. In my code I cannot update my database without selecting values from all 3 selection box.If I select value from paymentStatus only it wont update my database. What I need is to update my database only from selection boxes what I changed.It may be 1 or 2 or all of them.
const [pStatus, setPStatus] = useState('');
const [oStatus, setOStatus] = useState('');
const [dStatus, setDStatus] = useState('');
const updateOrderHandler = (e) => {
alert("Update handler working and passing data");
const adminOrderUpdate = {
'paymentInfo.paymentStatus':pStatus,
'orderStatus':oStatus,
'deliveryInfo.deliveryStatus':dStatus
}
dispatch(adminUpdateOrder(orderId, adminOrderUpdate))
}
<form>
<p className="ststxt">Payment Status</p>
<div className="statSel">
<select name="PS" onChange={(e) => setPStatus(e.target.value)} id="format">
<option selected disabled >{paymentInfo && paymentInfo.paymentStatus}</option>
<option value="Paid">Paid</option>
<option value="Pending">Pending</option>
</select>
</div>
<br />
<p className="ststxt">Order Status</p>
<div className="statSel">
<select name="OS" onChange={(e) => setOStatus(e.target.value)} id="format">
<option selected disabled>{orderStatus}</option>
<option value="Pending">Pending</option>
<option value="Baking">Baking</option>
<option value="Baked">Baked</option>
</select>
</div>
<br />
<p className="ststxt">Delivery Status</p>
<div className="statSel">
<select name="DS" onChange={(e) => setDStatus(e.target.value)} id="format">
<option selected disabled >{deliveryInfo && deliveryInfo.deliveryStatus}</option>
<option value="Pending">Pending</option>
<option value="Delivering">Delivering</option>
<option value="Delivered">Delivered</option>
</select>
</div>
<br />
<br />
<button className="sbmtbutton" style={{verticalAlign: 'middle'}} onClick={() => updateOrderHandler(order._id)}>
<span>Update Status </span>
</button>
</form>
in my actions.js
//admin update order stats
export const adminUpdateOrder = (id, orderData) => async (dispatch) => {
alert("Action recieved" + id + JSON.stringify(orderData))
try{
dispatch({type:A_UPDATE_ORDER_REQUEST})
const config = {
headers:{
'Content-Type': 'application/json'
}
}
const {data} = await axios.put(`/api/v1/admin/order/${id}`, orderData,config)
alert("link sended" + id + JSON.stringify(orderData))
dispatch({
type:A_UPDATE_ORDER_SUCCESS,
payload: data.success
})
}
catch(error){
dispatch({
type: A_UPDATE_ORDER_FAIL,
payload: error.response.data.message
})
}
}
I used alerts only for testing
Hi guys anyone know how to add input and button inside select
This is my code
<select
className="w3-select w3-border"
name="country"
onChange={onChange}
>
<option value="DEFAULT" selected disabled hidden>
Select Country :
</option>
{allcountry.map((item, index) => {
return (
<option key={index} value={item.countryname}>
{item.countryname}
</option>
);
})}
</select>
I want add input and button inside the Select Country , so when I input the allcountry state will update, Thank you :D
render(){
let { classes } = this.props;
let list = classes.map((item, index) => {
return (
<option >{item}</option>
)
})
return(
<div className="filter-bar">
<form className="sort-form">
<div className="classSelect">
<span>select class</span>
<select name="classSelect" onChange={this.handleClassChange}}>
<option selected="selected" >Please choose class</option>
{list}
</select>
</div>
</form>
</div>
)
}
};
i want to map over an array and use each element as options in select dropdown, and also have an extra blank option which defaults until dropdown is clicked.
at the moment, the extra i have is available in the list, but default is always first element from array, whereas i want the default to be "Please choose your class"
can somebody explain?
render(){
const classes = [
'Lorem',
'Ipsum',
'dolor',
'Sit',
'ames'
]
let list = classes.map((item, index) => {
return (
<option >{item}</option>
)
})
return(
<div className="filter-bar">
<form className="sort-form">
<div className="classSelect">
<span>select class</span>
<select name="classSelect" onChange={this.handleClassChange.bind(this)}>
<option value="none" selected disabled hidden>
</option>
{list}
</select>
</div>
</form>
</div>
)
Like this?