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!
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))}/>
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>
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>
Can I use multiple selection with React.createref()? It returns undefined.
<div>
<label>
Pilih Skill :{" "}
<select multiple ref={this.inputSkill}>
<option value="Front-end" key="1">Front-end</option>
<option value="Back-end" key="2">Back-end</option>
<option value="Dev-Ops" key="13">Dev-Ops</option>
<option value="Full Stack" key="41">Full Stack</option>
</select>
</label>
</div>
I have this HTML code (no, I can not to convert it in a ng-options):
<form>
<div class="list">
<div style="margin-bottom: 20px;">
<label class="item item-input item-select">
<div class="input-label">
Price From (start)
</div>
<select required id="priceForm" ng-model="search.priceFrom" ng-init="'search.priceFrom = searchParams.priceFrom'">
<option value=0>All</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000+</option>
</select>
</label>
</div>
<div>
<label class="item item-input item-select">
<div class="input-label">
Vacation Days (start)
</div>
<select required ng-model="search.vacationDays">
<option value=0 >All</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10+</option>
</select>
</label>
</div>
</div>
</form>
I want this:
The first time that I see this page the values of both select must be "All" (value = 0), and I think that I need only to add "required" but it does no work.
And for every next times the default value need to be the value inside searchParams.priceFrom (it is a variable in my $scope).
Where is my error ?
Thanks.
M.
Since both selects are bound to your search.vacationDays && search.priceFrom all you would need to do in your controller is something like:
$scope.search.priceFrom = 0;
$scope.search.vacationDatys = 0;
Please see demo below
just set your serach obj in controller
$scope.search = {
priceFrom: 0,
vacationDays: 0
}
var app = angular.module('app', []);
app.controller('fCtrl', function($scope) {
$scope.search = {
priceFrom: 0,
vacationDays: 0
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="fCtrl">
<form>
<div class="list">
<div style="margin-bottom: 20px;">
<label class="item item-input item-select">
<div class="input-label">
Price From (start)
</div>
<select required id="priceForm" ng-model="search.priceFrom" ng-init="'search.priceFrom = searchParams.priceFrom'">
<option value=0>All</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000+</option>
</select>
</label>
</div>
<div>
<label class="item item-input item-select">
<div class="input-label">
Vacation Days (start)
</div>
<select required ng-model="search.vacationDays">
<option value=0>All</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10+</option>
</select>
</label>
</div>
</div>
</form>
</div>
</div>