We Keep Coding

React JS Custom Filter Pane

I am trying to create a custom filter pane in React.JS as practice, but I am lost and do not know where to begin. I looked online and saw that you could create a filter bar online with a search bar, and while that is nice, I wanted to have multiple buttons to filter different things. For example, if I were to filter an option for shirts, I would like to filter the prospects for the price, graphics on the shirt or without, and the brand of the shirt. Any ideas are welcome! I don't have any code to display because I don't know where to start other than a button and handleChange method.

Thats very abstract situation, but here is how I would do it.
Plan what filters you want to have, try to imagine how it should look and work.
Get some data set from backend or from hardcoded data, so you will have what to work with.
Create component that will display that items.
Create UI for filters
Then you add logic for filters. On select some filter, you will filter data that comes into your component that provides data to component that display items. Filter that data and your component will display filtered data.
So all structure might look like this:
const ParentComponent = () => {
const [filters, setFilters] = useState({})
const data = ...
const filteredData = applyFilters(data, filters)
return (
<div>
<DisplayItems data={filteredData} />
<Filters ... />
</div>
)
}
Its just a basic example for little understanding.
Hope it helps

Filtering Down Component Map using click function react

I am currently working on a fun project and I want to know how to do something that has stumped for a bit.
Basically I am using Axios to get my data and then rendering data out in a .map func then I have a click function to show only the data that is corresponding to the ID for example ID 1 has some values that I want to show in another component. How do I do that?
https://j99t7.csb.app/
If you see my sand box and click on one of the ids and see the console / code - this is where I am stuck at.
Cheers,
Dave :)

In order to filter the data, you can use something like:
const [filteredData, setFilteredData] = useState([]);
//onclick
setFilteredData(data.filter(element => element.id === id));
//jsx return
filteredData.map(filteredElement => {
//loop through elements and display data desired
})

Though I'm not a React Master, onClick doesn't return JSX or TSX.
i.e where would the returned value be rendered, in most cases, it used as a void function with no return value

Creating a handler for fluent ui drop down, using a dynamic name for a React state

I have a drop down:
<Dropdown
id="JobPlanDD"
selectedKey={(this.state["JobPlanDD-option"]) ? (this.state["JobPlanDD-option"]).key : undefined}
placeholder="Select..."
onChange={(e, i) => this.handleChange(e, i)}
options={jobPlanDDOptions}
/>
And I have a handler for that drop down and any others I make in the future:
const id = evt.target.querySelector('span').id;
const theItem = item.text;
this.setState({
[id]: theItem
});
For this particular drop down I've been told to use JobPlanDD-option in the selectedKey property but I don't understand why.
I manage to log the id of the of the particular drop down thanks to the handler
const id = evt.target.querySelector('span').id;
but it returns JobPlanDD-option which can't be a state because it has a hyphen or minus.
Can someone explain to me what's going on here?
I have read this and although it describes much, it doesn't completely pertain to my question:
Reactjs setState() with a dynamic key name?

Needed a nudge with this one:
The dynamic state was being set, it was just how I needed to write it in order to use it:
console.log(this.state["JobPlanDD-option"], 'state.JobPlanDD')
Staring me in the face...

React formik with React-select Convert multiple select array to string

Hi I am using react formik and react-select package I create form create and update in component. I want to create an multiple Select values are send to string But now going as array. On update also want to Bind as string Is it possible.
Please Help us Thanks for Help
code Sandbox Link : https://codesandbox.io/s/multipleselect-formik-3eqxp?file=/src/RegisterForm.js

Let me know if you want something else, but this is what I understand. You want developer,engineer to be sent to the API. Change you onSubmit like this and you will get the jobs the way you want.
const onSubmit = (values) => {
const jobs = [];
values.job.map((ele) => jobs.push(ele.value));
console.log("text => ", jobs.toString());
};

Building an autocomplete textbox with ReactJS

My idea is to mantain the list of filtered users (suggestions) as state on the component, when the input changes, the state is updated.
How can I display the filtered list below the text box?
One option is 'datalist' tag (HTML5), but the list is already filtered, and part of the functionality of this tag is filtering.
I can't use any library or framework.
English is not my native language, sorry if you find some mistake.
Thanks.

Try a component from a design library, like the Material-UI autocomplete component http://www.material-ui.com/#/components/auto-complete
The dataSource attribute represents the array of autocomplete options.

How I did it was to pass in the dataList array as a prop and filterByField prop so that you can change what to filter, then add an event listener to the input (onChange) that passes the value to a function that filters the dataList.
onChangeInput(e) {
const { dataList, filterByField } = this.props;
const filteredDataList = dataList.filter(items => items[filterByField].toLowerCase().startsWith(e.target.value.toLowerCase()) );
// update internal component state to trigger render of dropdown list
this.setState({filteredList: filteredDataList});
}
I also added a check for no matches found so I can show a message:
if (filteredDataList.length === 0) {
this.setState({noMatchFound: true});
}
Then in my render() I simply check if filteredList isn't null and show an unordered list that I use css to display below the input.
{this.state.filteredList !== null
<ul className="autocomplete-list">
{this.filteredListMarkup()}
</ul>
}
filteredListMarkup() then uses map to return an <li> for each item with the necessary event handlers to update the selected item into the input and close the autocomplete-list by this.setState({filteredList: null});

You might also find this one useful:
https://github.com/reactjs/react-autocomplete

Even if you could use dependencies, I tried a bunch of the top current ones and personally wasn't happy with any of them (added dependencies like jQuery, not lightweight to use/understand/customize, css challenges, etc).
In then end, I found this lightweight vanilla React typeahead tutorial (no, I didn't write the tutorial). It's quick, simple, and three's no added dependency tree weight (eg: jQuery) or dependency maintenance. This solution also easily adjusted to the newer React patterns & the libraries I was using, and I'm guessing the same would be true of the patterns/libraries you may be using. Maybe this will help you or someone else like it did me.