I would like to use addResults option in bootstrap-select to add new items. I should be prompted to add search string, but I get default message No Results.
jsfiddle
component.jsx
class TodoApp extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
$(this.selectPicker).selectpicker({
liveSearch: true,
addResults: true,
});
}
render() {
return (
<div>
<select className="form-control" data-width="100%" ref={el => (this.selectPicker = el)}>
<optgroup label="Group 1">
<option defaultValue>Team</option>
<option value="1">AAA</option>
</optgroup>
<optgroup label="Group 2">
<option value="2">BAC</option>
<option value="3">BAY</option>
</optgroup>
<optgroup label="Group 3">
<option value="4">DACA</option>
</optgroup>
</select>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
Related
My question is that I am doing data filtering using formik and I change the query of the URL when I submit the form and it worked. now the problem is that when I open a new tab in the browser and paste the URL with the queries in it the form value "the select element value" does not change according to the URL queries. I tried to debug it but I failed.
import Head from "next/head";
import { Formik, Field, Form } from "formik";
import router, { useRouter } from "next/router";
import { useState, useEffect } from "react";
export default function Home() {
const { query } = useRouter();
const [initialValues, setInitialValues] = useState({
categories: query.categories || "all-categories",
color: query.color || "all-color",
size: query.size || "all-size",
});
return (
<div>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
</Head>
<Formik
initialValues={initialValues}
onSubmit={(values) => {
router.push({ pathname: "/", query: values }, undefined, {
shallow: true,
});
}}
>
<Form>
<Field label="categories" as="select" name="categories">
<option value="all-categories">get all</option>
<option value="electronics">electronics</option>
<option value="jewelery">jewelery</option>
<option value="men-clothing">men's clothing</option>
<option value="women-clothing">women's clothing</option>
</Field>
<Field label="categories" as="select" name="color">
<option value="all color">all color</option>
<option value="red">Red</option>
<option value="black">Black</option>
<option value="white">White</option>
</Field>
<Field label="size" as="select" name="size">
<option value="all-size">all size</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
</Field>
<button type="submit">Submit</button>
</Form>
);
</Formik>
</div>
);
}
How can I display multiple options tag in my Select component ?
Here's my component :
<Select
id='myID'
name='myName'>
{
(
(localStorage.getItem("localStorageKey").includes("John"))
?
<option key=1 value=myFirstValue>Option 1</option>
:
`
"Something else here"
`
)
}
</Select>
So far if I put just one option it's working, but if I add another one, say :
<Select
id='myID'
name='myName'>
{
(
(localStorage.getItem("localStorageKey").includes("John"))
?
<option key=1 value=myFirstValue>Option 1</option>
+
<option key=2 value=mySecondValue>Option 2</option>
:
`
"Something else here"
`
)
}
</Select>
It won't display anything
<>
<option key=1 value=myFirstValue>Option 1</option>
<option key=2 value=mySecondValue>Option 2</option>
</>
Wrap you options like this
In order to have more than one JSX element as sibling, It should be wrapped either in a React Fragment or in an array.
<> is a short hand for <React.Fragment>
<Select
id='myID'
name='myName'>
{
(localStorage.getItem("localStorageKey").includes("John"))
?
<>
<option key={1} value="myFirstValue">Option 1</option>
<option key={2} value="mySecondValue">Option 2</option>
</>
: "Something else here"
}
</Select>
By using array,
[<option key={1} value="myFirstValue">Option 1</option>,
<option key={2} value="mySecondValue">Option 2</option>]
I am trying to use onClick function on react.js HTML select option and it works perfectly on Firefox but not on Chrome. How can I make it work in Chrome? Here is my code so far:
import React, { Component } from "react";
import DateRangePicker from "react-daterange-picker";
import "react-daterange-picker/dist/css/react-calendar.css";
import originalMoment from "moment";
export class Filter extends Component {
constructor(props, context) {
super(props, context);
this.state = {
isOpen: false,};
}
onToggle = () => {
this.setState({ isOpen: !this.state.isOpen });
};
render() {
return (
<div className="filter_range">
<select
class="form-control donn"
name="today"
>
<option selected disabled hidden>
Choose{" "}
</option>
<option value="today">Today</option>
<option value="yesturday">Yesterday</option>
<option>Last Week</option>
<option value="month">Last Month</option>
<option>Last Quarter</option>
<option value="year">Last Year</option>
<option value="">Overall</option>
<option value="" onClick={this.onToggle}>
Custom
</option>
</select>
{this.state.isOpen && (
<DateRangePicker
value={this.props.value}
onSelect={this.props.change}
singleDateRange={true}
isOpen={false}
maximumDate={new Date()}
closeCalendar={true}
numberOfCalendars={2}
showLegend={true}
locale={originalMoment().locale()}
/>
)}
</div>
);
}
}
export default Filter;
Try to use onChange instead of onClick for select element.
<select class="form-control donn" name="today" onChange={handleChange}>
Just add value to your custom option and check for it in the if statement
<option value="custom">
Custom
</option>
export class Filter extends Component {
constructor(props, context) {
super(props, context);
this.state = {
isOpen: false,
};
}
handleChange = (event) => {
if (event.target.value === "custom") {
this.setState({ isOpen: !this.state.isOpen });
}
};
render() {
return (
<div className="filter_range">
<select class="form-control donn" name="today" onChange={handleChange}>
<option selected disabled hidden>
Choose{" "}
</option>
<option value="today">Today</option>
<option value="yesturday">Yesterday</option>
<option>Last Week</option>
<option value="month">Last Month</option>
<option>Last Quarter</option>
<option value="year">Last Year</option>
<option value="">Overall</option>
<option value="custom">
Custom
</option>
</select>
{this.state.isOpen && (
<DateRangePicker
value={this.props.value}
onSelect={this.props.change}
singleDateRange={true}
isOpen={false}
maximumDate={new Date()}
closeCalendar={true}
numberOfCalendars={2}
showLegend={true}
locale={originalMoment().locale()}
/>
)}
</div>
);
}
}
export default Filter;
Option onClick - Unnecessary
You can put onChange in the select tag
The select onChange trigerd when option is clicked (changed).
You can have a child component that only renders the option tag. You actually don't need to add an event handler to the option tag. The select onChange event get called automatically once an option tag is clicked (passing it's value with it).
See the example here: https://codepen.io/gaearon/pen/JbbEzX?editors=0010
I am having Uncaught TypeError: this.state.salaryDetails.map is not a function error while using map in react js. What may be the solution for this issue? Following below is the code:
import React, { Component } from 'react';
import httpBrowsing from './../../../utils/httpBrowsing';
import { NativeSelect, FormControl } from '#material-ui/core'
export class Salary extends Component {
constructor() {
super();
this.state = {
salaryDetails: '',
data: {
employeeName: '',
year: '',
month: ''
}
}
}
handleChange = (e) => {
const { name, value } = e.target;
this.setState((pre) => ({
data: {
...pre.data,
[name]: value,
employeeName: this.state.salaryDetails.filter((item) => item[name] === value)
}
}))
}
componentDidMount() {
httpBrowsing.get('/addemployee', true)
.then((data) => {
this.setState({
salaryDetails: data.data,
})
})
.catch(err => {
console.log("error", this.state);
debugger;
})
}
render() {
console.log("what is this >>", this.state);
console.log("finally>>", this.state);
const { salaryDetails } = this.state;
let Employ = this.state.salaryDetails.map((item, id) => <option key={id} value=
{item.name}>{item.name}</option>)
return (
<div>
<div className="container">
<div className="row">
<div className="col-md-6">
<label htmlFor="month">Month:</label>
<FormControl>
<NativeSelect defaultValue="" name="month" onChange=
{this.handleChange}>
<option >Choose</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</NativeSelect>
</FormControl><br />
</div>
<div className="col-md-6">
<label htmlFor="year">Current Year:</label>
<FormControl>
<NativeSelect defaultValue="" name="Year" onChange=
{this.handleChange}>
<option >Choose</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</NativeSelect>
</FormControl><br />
</div>
</div>
<div className="col-md-6">
<label htmlFor="Select Employee">Select Employee:</label>
<FormControl>
<NativeSelect defaultValue="" name="name" onChange=
{this.handleChange}>
<option >Choose</option>
{Employ}
</NativeSelect>
</FormControl><br />
</div>
</div>
</div >
)
}
}
I tried to use option from database using native select of material UI,but error is shown.what may be the issue ?what may be the solution for the problem?How can i solve the issue?
Please provide me a solution.
Looking at the constructor within the component, the salaryDetails state is initialised as an empty string, ''.
Array.map() can only be used on arrays. THerefore, you should be initialising your salaryDetails state as an empty array.
this.state = {
salaryDetails: [],
data: {
employeeName: '',
year: '',
month: '',
},
}
I have a problem here. I have an react api and i want to make a select box to filter data by specific attribute.
constructor() {
super();
this.state = {
results: []
};
}
I receive a list of items with name and ratings. And I want to filter with select. If I want to see just items with 5 rating or greater, select 5.
return (
<div className="container clearfix">
{/* value={props.search} */}
<select>
<option value="" />
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
</select>
<div>
{props.results
.map(item=> (
<div key={item.id} className="item-holder">
<img src={`${imagePath}${item.image}`} />
<span className="votes">{item.rating}</span>
<p>{item.title}</p>
</div>
))}
</div>
</div>
);
TX!
You need to attach a listener to Select e.g.
<Select onChange={(event) => this.setState({filterValue: event.target.value})}
then you can filter the results with
props.results.filter((item) => item.rating >= this.state.filterValue)
.map(...)