I have a list of items and I want to filter through them.
In order to do so I have a filtering component that looks like this:
[ text input "item name" ] [ dropdown "item category" ] [ date picker ]
I'm using React with Redux, react-redux and react-router. There's no "Filter" in my component, I want the items to get filtered as I type.
First of all I'm not sure how should I dynamically create the URL, so for example if you type "Abc" in the first input I want the current URL to be:
http://example.com/currentPage?filter=Abc&category=&dates=
As I type I want the URL to be changing constantly, so the URL actually builds as I type / choose options from dropdown / date picker. How could I achieve that with React Router?
Thanks
This is so straightforward. Just add onChange function to your input field. Like below.
import React from 'react';
class Filter extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
filter: '',
category: '',
dates: '',
}
}
handleChange(evt) {
this.setState({
filter: evt.target.value,
}, () => {
this.props.fetchFilteredItems(`http://example.com/currentPage?filter=${this.state.filter}&category=${this.state.category}&dates=${this.state.dates}`); // I assumed fetchFilteredItems comes from redux as an action.
});
}
render() {
return (
<div>
<input onChange={this.handleChange} />
<YourDropdown />
<YourDatePicker />
</div>
);
}
}
Hope this solves your problem.
Related
I am new to React Native but have been searching for days so if this is easy please let me off the hook.
I have this component:
<DatePicker
signInDate={this.state.signInDate}
mode="date"
placeholder="select date"
format="DD-MM-YYYY"
minDate="01-01-1950"
maxDate="01-01-2050"
androidMode="spinner"
showIcon={false}
onDateChange={this.onDateChange('signInDate')}
/>
Which uses this class:
export default class CPT extends Component {
constructor(props) {
super(props);
this.state = {
userName: '',
isModalVisible: false,
signInDate: "01-01-2000",
startPump: "01-01-2000",
endPump: "01-01-2000",
signOut: "01-01-2000",
equipmentUsed: '',
}
}
onDateChange = (state) => (event, value) => {
this.setState({
state: value });
}
Whenever I update the date the value does change however the display value does not and I can't figure out what is going wrong.
I am stuck please, if you can point me in the right direction or tell me what I am doing wrong that would be greatly appreciated.
Basically I am going to have multiple DatePickers in this popup and will submit them to a DB or a web service when I am done when they hit submit.
I can post the rest of the code if needed.
First suggestion is that try using React-Native-Community-Date-Picker
and seems like there are some mismatch between your DatePicker props and your state attributes.
for example if you want to change signInDate in your state then your setState should look something like this this.setState({ signInDate: value }); and onDateChange would look like onDateChange={this.onDateChange}
Here is my problem. I have a dropdown which will have list of options. On selecting an option, a new Tab will open which will have a Tableau dashboard of that particular option. How can i solve the query parameter thing since i need to send back end the query string(Option_ID).
Here is my Dropdown Component:
import React,{Component} from 'react';
import './Dropdown.css';
class DisplayContainer extends Component {
constructor(props){
super(props);
this.handleSelection = this.handleSelection.bind(this);
this.state = {
displayValue: 'Select a Client'
}
}
handleSelection(item){
this.setState({
displayValue: item.client
});
window.open('/client');
}
render(){
const listItems = this.props.options;
return (
<div className='dropdown-width'>
<DropDown options={listItems} value={this.state.displayValue} onClick={this.handleSelection} />
</div>
);
}
}
export default DisplayContainer;
Right now i am able to open a new tab by simple(dummy) routing. I need a way to send ID to server side. Can you please help me with it.
To resolve this, you could make use of the query string when opening your new tab/window with window.open().
So, updating your handleSelection() method like this would achieve what you need:
handleSelection(item){
this.setState({
displayValue: item.client
});
window.open('/client?option_id=' + item.id);
}
Then, you'd just need to update the <Tableau /> component that is displayed at the /client route, so that is reads and reacts to the value of the option_id variable in the query string.
Hope this helps!
This question regards collecting JSON-data from a local file and doing multiple state updates.
Im using import database from './db.json' to collect JSON-data in my parent component (app.js) is this a proper way to import local data?
db.json
{
"items": [
{
"key": 1,
"name": "Item 1",
},
{
"key": 2,
"name": "Item 2",
},
...
App.js
import React, { Component } from 'react';
import db from './db.json';
export default class App extends Component {
...
}
After import, database get set as a state
this.state = {
database: db,
term: '',
};
Example of a method
onChange = (e) => {
this.setState({term: e.target.value})
};
State and methods transfers as props to child components (stateless)
<Component onChange={this.onChange} stateOfDb={this.state.database} />
All my methods are placed in App.js and being passed down to stateless components, is this a good practice?
What if I want to create a search function and be able to filter thru each item in the database, how could a example of this look?
You can always filter stuff directly on render-time.
Ex:
updateSearch(ev){
this.setState({searchString: ev.target.value});
}
render(){
const filterData = this.state.searchString ? this.state.database.filter(row => row.someProperty.indexOf(this.state.searchString) > -1) : this.state.database;
<div>
<input type="text" onChange={(ev) => this.updateSearch(ev)} />
<ChildComponentToRenderData data={filteredData} />
</div>
}
You dont even have to put the database in state, since it is in fact just held in memory after the import. So in fact, instead of filtering using this.state.database, you can actually just do db.filter. Probably also nice to check if the searchString is actually set when filtering.
JSBin: https://jsbin.com/qotuxofalo/edit?js,output
(^ uses ES6 class, so please use a latest browser to test)
If I comment out the second input the form submits, but does not submit with more than 1 input.
What am I missing?
You need to add a input of type submit to make the form work. Check the following examples. Adding that will submit the form on pressing enter. If you don't want that submit button, you can hide it using css.
Demo:
https://jsbin.com/mafafoxoji/1/edit?js,output
If desired, you can also access the text as it is being entered using the onChange event handler: https://jsbin.com/moqogag/edit?js,output
class App extends React.Component {
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
console.log("CHANGING")
console.log(e.target.value)
}
render() {
return React.DOM.form({ onChange: this.handleChange, action: "" }, [
React.DOM.input({ type: "text" }),
React.DOM.input({ type: "text" })
])
}
}
ReactDOM.render(
React.createElement(App),
document.getElementById("app")
)
I am using React Select and for some reason my state is only changing after an option has been selected twice.
I have the following code:
var React = require('react');
import Select from 'react-select';
class VehicleSelect extends React.Component {
constructor(props) {
super(props);
this.state = { brandSelect: ""};
}
_onChange(value) {
//console.log(value) - just to see what we recive from <Select />
this.setState({brandSelect: value});
console.log(this.state.brandSelect);
}
render() {
var options = [
{ value: 'Volkswagen', label: 'Volkswagen' },
{ value: 'SEAT', label: 'SEAT' },
{ value: 'SKODA', label: 'SKODA' }
];
return (
<Select
name="form-field-name"
value={this.state.brandSelect}
options={options}
placeholder="Select a brand"
searchable={false}
onChange={this._onChange.bind(this)}
/>
)
}
};
// Export our component
export default VehicleSelect;
When one of the options is selected it won't console.log the new state however if I select the option again it will. Any idea where I am going wrong, I'm guessing because the state isn't being shown in the console.log it isn't updating?
Thanks
setState does not change state immediately. You need to use a callback. Docs.
_onChange(value) {
//console.log(value) - just to see what we recive from <Select />
this.setState({brandSelect: value}, () => {
console.log(this.state.brandSelect);
});
}