Not able to fetch dynamic array in react
<div className="input-field col s12">
<select id='department' required={true} aria-required={true} onChange={this.handleChange}>
{this.state.departmentData.map((dep) =>(
<option key={dep.id} value={dep.id}>{dep.department_name}</option>
))}
</select>
<label>Department </label>
</div>
Related
I am a beginner at React JS. I would like to learn how to store selected values in useState.
The form containts four different drop downs and I want to store this selected values in useState so that at the end of the multi step form, user can go back to edit the fields before sub.
import React, {useState} from 'react';
import './paperdetails.css';
import IncDecCounter from './IncDecCounter'
import {
Text
} from '#chakra-ui/react';
const PaperDetails = () => {
const [selected, setSelected] = useState();
return (
<div className='paper-details'>
<div className='paper-details_display_flex'>
<div className='left'>
<div className='left-calc_wrapper'>
<div>
<label>Type of Paper</label>
<select>
<option value="essay">Paraphrasing</option>
<option value="Custom Writing">Custom Writing</option>
<option selected value="Dissertation">Dissertation</option>
<option value="Research Paper">Research Paper</option>
<option value="essay">Essay</option>
<option value="Term Paper">Term Paper</option>
<option selected value="Admission Essay">Admission Essay</option>
<option value="Coursework">Coursework</option>
<option value="Book Review">Book Review</option>
<option selected value="Paraphrasing">Essay</option>
<option value="Physics Paper">Physics Paper</option>
</select>
</div>
<div>
<label>Study Level</label>
<select>
<option value="school">Bachelor</option>
<option value="college">College</option>
<option selected value="Bachelor">School</option>
<option value="Masters">Masters</option>
</select>
</div>
</div>
<div className='left_middle'>
<div className='calc-control'>
<label>Number of Pages</label>
<IncDecCounter />
</div>
<div className="select-deadline">
<label>Deadline</label>
<select className='deadline' value={selected} onChange={e=>setSelected(e.target.value)}>
<option value="1 hour">1 hour</option>
<option value="3 hours">3 hours</option>
<option selected value="8 hours">8 hours</option>
<option value="12 hours">12 hours</option>
<option value="24 hours">24 hours</option>
<option value="48 hours">48 hours</option>
<option selected value="3 days">3 days</option>
<option value="5 days">5 days</option>
<option value="7 days">7 days</option>
<option selected value="14 days">14 days</option>
</select>
<span color={'#785aec'} fontSize={'14px'}
fontWeight={'bold'}> Will be ready in: {selected}
</span>
</div>
</div>
<section className="writing-instructions">
<div className="writing_instructions">
<div className="d-flex">
<label className='instructions'>
Writing instructions
<span className='text-orange'> *required</span>
</label>
<input className="input-file" id="my-file" type="file"
accept="application/pdf,application/msword,
application/vnd.openxmlformats-officedocument.wordprocessingml.document"/>
<label tabindex="0" for="my-file" className="input-file-trigger">
<span className='span--underlinel-blue'> Upload writing Instructions</span>
</label>
</div>
<div className='text-area'>
<textarea className='text-area_main'
placeholder='Type your instructions here. Please provide as many details as possible.'></textarea>
</div>
</div>
</section>
</div>
<div className='right'>
<div className='total-row'>
<div className='total-text'>
<h1 className='total-text_h1'>Total:</h1>
<span className='span_price'>$0.00</span>
</div>
</div>
</div>
</div>
</div>
)
}
export default PaperDetails;
How to store multiple values in state
to do this ,you will need to define state for all four select box like this
const [seleccedValue1,setSelectedValue1]=useState(null);
const [seleccedValue2,setSelectedValue2]=useState(null);
const [seleccedValue3,setSelectedValue3]=useState(null);
const [seleccedValue4,setSelectedValue4]=useState(null);
then you will need to handle on change event of each select box like this
<select onChange={(e)=>{setSelectedValue1(e.target.value)}}>
<option value="essay">Paraphrasing</option>
<option value="Custom Writing">Custom Writing</option>
<option selected value="Dissertation">Dissertation</option>
<option value="Research Paper">Research Paper</option>
<option value="essay">Essay</option>
<option value="Term Paper">Term Paper</option>
<option selected value="Admission Essay">Admission Essay</option>
<option value="Coursework">Coursework</option>
<option value="Book Review">Book Review</option>
<option selected value="Paraphrasing">Essay</option>
<option value="Physics Paper">Physics Paper</option>
</select>
you can do the same for other select boxes as well
Please checkout this question:
It was already answered here:
React JSX: selecting "selected" on selected <select> option
Here is how you store value of any input field in useState();
const [selected,setSelected] = useState({});
function handleChange(event){
setSelected({...selected,[event.targe.id]=event.target.value});
}
return(
<select
id={"id_0"}
value={selected["id_0"]}
onChange={(event)=>(handleChange(event))}>
......."your code continue here"
and here is how you handle multiple input fields.
<select id={'id_1'} value={selected['id_1']}
onChange={(event)=>(handleChange(event))}/>
<select id={'id_2'} value={selected['id_2']}
onChange={(event)=>(handleChange(event))}/>
<div className="input_container">
<h1>Shipping Address</h1>
<div class="Contactus_table1_inputbox">
<h4>Full Name*</h4><br></br>
<input type="text" required="required"/>
</div>
<div class="Contactus_table1_inputbox">
<h4>Address Line*</h4><br></br>
<input type="text" required="required"/>
</div>
<div class="Contactus_table1_inputbox">
<h4>Zip/Postal Code*</h4><br></br>
<input type="text" required="required"/>
</div>
<div class="Contactus_table1_inputbox">
<h4>City*</h4><br></br>
<input type="text" required="required"/>
</div>
<div class="Contactus_table1_inputbox">
<h4>Country</h4><br></br>
<select>
<option className="option" value="" >India</option>
<option value="" >Australia</option>
<option value="" >France</option>
<option value="" >Germany</option>
<option value="" >Maldives</option>
</select>
</div>
<div className="container">
<div class="Contactus_table1_inputbox">
<h4>Email Address*</h4><br></br>
<input type="text" required="required"/>
</div>
<div id="phone_number" class="Contactus_table1_inputbox">
<h4>Phone Number*</h4><br></br>
<input type="text" required="required"/>
</div>
</div>
</div
// Think of a shopping website when you add your address to your order in payment page there will be summary of your shipping address and order id. I have to show it in another file.
<div className="payment_table2_box">
<h1>Shipping to</h1>
<h2>John Doe</h2>
<p>House no. 10, Amazing Building, Beautiful street, Near Ancient Landmark</p>
<h3>Hyderabad,123456</h3>
<h3>Telangana</h3>
<h3>+91 12345 78900</h3>
<a href="/Address" id="Learn_btn" >Edit</a>
<img id="edit_img" src="../images/edit_img.svg" alt="" />
</div>
// After submission Data should store locally and show in placeholders of payment_table2_box div.
You can make state global using contex api and push or redirect to the page where you want your data to be displayed and access data from context to display in the page.
Hi I am using bootstrap to design my page.
const AddRestaurent = () => {
return (
<div className="mb-4">
<form action="">
<div className="form-row">
<div className="col">
<input type="text" className="form-control" placeholder="name"/>
</div>
<div className="col">
<input type="text" className="form-control" placeholder="location"/>
</div>
<div className="col">
<select className="custom-select my-1 mr-sm-2">
<option disabled>Price Range</option>
<option value="1">$</option>
<option value="2">$$</option>
<option value="3">$$$</option>
<option value="4">$$$$</option>
<option value="5">$$$$$</option>
</select>
</div>
<button className="btn btn-primary">Add</button>
</div>
</form>
</div>
)
}
export default AddRestaurent
These components should come on same row. but they are coming in different row. what mistake I am doing. I have included library in my index.html
I assume you're using bootstrap 5.0.
https://getbootstrap.com/docs/5.0/forms/layout/
Try using row instead of form-row.
You can also use gutter (ex. g-2) to adjust gutter width.
const AddRestaurent = () => {
return (
<div className="mb-4">
<form action="">
<div className="row">
<div className="col">
<input type="text" className="form-control" placeholder="name"/>
</div>
<div className="col">
<input type="text" className="form-control" placeholder="location"/>
</div>
<div className="col">
<select className="custom-select my-1 mr-sm-2">
<option disabled>Price Range</option>
<option value="1">$</option>
<option value="2">$$</option>
<option value="3">$$$</option>
<option value="4">$$$$</option>
<option value="5">$$$$$</option>
</select>
</div>
<button className="btn btn-primary">Add</button>
</div>
</form>
</div>
)
}
export default AddRestaurent
You have to use row as classname instead of group-row
<div className="form-row"> replace with <div className="row">
So I am new to react and materialize. What I am trying to do is to generate a simple dropdown.
I am sourcing the data via fetch and storing the in an array
let fruits = fruitList.map((fruit,i) => <option key={i} value={fruit.name}> {fruit.name} </option>);
I then add this to the state with this.setState(...)
The issue that I am having is that following code does not show any from the fruitList but only the explicitly defined ones, i.e. in the case below, only Banana
<div className="my_container" >
<div className="input-field col s12">
<select searchable='List of Fruites' onChange={this.handleChange}>
<option value="" disabled >Choose your Fruit</option>
{this.state.fruits}
<option value="Banana" >Banana</option> */}
</select>
<label>Materialize Select</label>
</div>
</div>
Can someone help?
Thanks
Try setting the fruitList array in the state.
And in the code block, you can use it as:
<div className="my_container" >
<div className="input-field col s12">
<select searchable='List of Fruites' onChange={this.handleChange}>
<option value="" disabled >Choose your Fruit</option>
{this.state.fruitList && this.state.fruitList.map((fruit,i) => <option key={i} value={fruit.name}> {fruit.name} </option>)}
<option value="Banana" >Banana</option>
</select>
<label>Materialize Select</label>
</div>
</div>
There were some typos.
I don't know if fruitList is a passed prop or some static data, but you should avoid storing React components in state. It is also a React anti-pattern to store passed props into local component state. Just render out the content directly in the JSX.
<div className="my_container">
<div className="input-field col s12">
<label>
<select searchable='List of Fruites' onChange={this.handleChange}>
<option value="" disabled>Choose your Fruit</option>
{fruitList.map(({ name }) => (
<option key={name} value={name}>{name}</option>
))}
</select>
Materialize Select
</label>
</div>
</div>
const fruitList = [{ name: 'Apple' }, { name: 'Pear' }, { name: 'Orange' }];
ReactDOM.render(
<div className="my_container">
<div className="input-field col s12">
<label>
<select searchable='List of Fruites'>
<option value="" disabled>Choose your Fruit</option>
{fruitList.map(({ name }) => (
<option key={name} value={name}>{name}</option>
))}
<option value="Banana">Banana</option>
</select>
Materialize Select
</label>
</div>
</div>,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Is anyone able to explain me why this code is not working?
<div className="row">
<div className="input-field col s12">
<select
onChange={props.handleSelected}
id="realEstateBroker"
defaultValue={'Default'}
>
<option value="Default" disabled>
Brak
</option>
{
realEastateBroker &&
realEastateBroker.map((broker, i) => (
<option key={i} value={broker.firstName}>
{broker.firstName}
</option>
))
}
</select>
<label>Opiekun oferty</label>
</div>
</div>
Options from the map func are not generated on the page. On the chrome console I can see them under select but not in ul list (if I hardcode options, there are working). Working example:
<div className="row">
<div className="input-field col s12">
<select
multiple
onChange={props.handleSelectedMultiple}
id="balcony"
defaultValue={[]}
>
<option value="Default" disabled>
Brak
</option>
<option value="Balkon">Balkon</option>
<option value="Taras">Taras</option>
<option value="Ogród">Ogród</option>
<option value="Loggia">Loggia</option>
<option value="Taras na dachu">Taras na dachu</option>
</select>
<label>Balkon</label>
</div>
</div>
realEstateBroker is array of objects.
<div className="row">
<div className="input-field col s12">
<select
onChange={props.handleSelected}
id="realEstateBroker"
defaultValue={'Default'}
>
<option value="Default" disabled>
Brak
</option>
{
realEastateBroker &&
realEastateBroker.map((broker, i) => {
return(<option key={i} value={broker.firstName}>
{broker.firstName}
</option>
)
})
}
</select>
<label>Opiekun oferty</label>
</div>
</div>
From map you need to return the values to be rendered on UI. Hope this helps!