I wan to make multiple selector like this.
Choices are prepared in advance, and then user can select a few items.
At first, I think I use <Switch> component but this visual is different from what I want.
then I read about <Select> but, it is also different.
My current answer is using multiple <Button> , (but it looks a bit not cool...??)
Am I right?? or Is there any alternative??
I think this could help you to use Chip in material-ui
and then use an array to push the newly selected item to it.
const [theArray, setTheArray] = useState(initialArray);
and in a onChange kind of function push selected item to save them
setTheArray([...theArray, newElement]);
Related
I've been using Stack Overflow forever, but I just made an account to ask my first question. Thanks in advance for all your help. Here goes:
I'm trying to work out the proper composition for these custom modular table filtering components I wrote and I could use a little guidance.
My table rows are stored in an array in the main page that these components will be displayed on. Each <TableFilter /> takes a specific column name of the table as a prop and renders UI to input and select filter options (e.g. for numeric columns there's a button that lets the user select <, >, =, etc.) and has a function to apply that filter and return only the selected rows from the table.
I've got these TableFilter components working great independently, but I'd like to be able to apply multiple filters at once. That's why I am working on a TableFilterGroup component that will contain the filters as children and handle passing data between them.
The plan is for easy use of the component, formatted like so:
<TableFilterGroup rows={this.state.tableRows} apply={this.applyFilters} >
<TableFilter column={'Name'} isNumeric={false} />
<TableFilter column={'ID'} isNumeric={true} />
<TableFilter column={'Color'} options={['Red', 'Blue', 'Green']} />
</TableFilterGroup>
I intend to have one "Apply Filters" button, rendered by the TableFilterGroup, that will iteratively call the filter functions of each of the TableFilter child components.
(^ Edit for clarity: this ApplyFilters() function of the TableFilterGroup will get the selected rows from filter 1, then pass them into filter 2 and so on, then finally call this.props.apply to set the fully-filtered rows to a state in the main page that holds these components as well as the actual table where the data is displayed.)
All of the TableFilter components need to work on the table data provided by the rows prop of their parent TableFilterGroup, and the TableFilterGroup needs to be able to iteratively call the filtering functions of each of its TableFilter children, letting their output (the filtered rows) waterfall to apply multiple filters simultaneously.
I've been reading about useRef and all the examples seem to be for the case of the child component being rendered in the return statement of the parent component, but I'm looking to add them in as children in between the two tags of the TableFilterGroup.
If anybody reading this has experience with this type of composition and is able to point me in the right direction, I would very much appreciate it! Or, if the consensus is that I'm just structuring this incorrectly overall, what would you suggest as a better way to format it? Thanks!
I’m creating a meal planner and I want to use the same modal component to add and edit meals, because they are exactly the same. The modal includes inputs for name, ingredients and the day of the week to make it. When adding new meals, I want the modal inputs to be empty and when editing I want the inputs to have the current data so the user doesn’t have to re-enter all of it.
My attempt so far has been to enter a prop string to the PlannerModal that is either “add” or “edit” and either do a fetch post or put depending on that prop. This seems to work ok, but I’m running into the problem of setting the data into the inputs with the value attribute which I do not want when adding a meal, so I’m thinking there has to be a better way of organizing all of this, aside from creating two different modals.
My component hierarchy looks like this if it helps:
I don't see a problem with your approach, However, there are a few improvements I can come up with, first, instead of passing “add” or “edit” as string, you should try using enum in this scenario, and I assume the issue you are having is caused by having the value property, if that's the case, you can do something like
const inputProps =
props.mode === Mode.Edit
? {onChange: ...., value: something}
: {value: something, disabled: true}
and then you should be able to spread the inputProps into your input element like
<input {...inputProps} />
sounds a bit confusing but just giving you an idea to pas props optionally
I am currently working with react-select with single selection. After selecting a particular value, I would like the user to be able to edit the typed in text (not necessarily the same as the rendered option (formatOptionLabel).
https://codesandbox.io/s/react-select-course-dfmn2?file=/src/Selector.tsx
For example, if I typed in PHYS101, and then select the option PHYS101 ... joe, and then proceed to edit the text, for backspace the form would be come PHYS10 and if I type A then it would be PHYS101A.
I attempted to use the onInputChange and onChange props, but I cannot get it to work consistently. I would appreciate any suggestions or snippets of code I could use.
There is a similar issue. Maybe that could help.
Here is a link to the issue. react-select custom tag edit feature
OR
If you wanna switch over to some other library for your specific purpose.
You could use react-selectize.
You can provide props to edit the selected option.
I solved it like this.
I pulled a reference to the internals via ref
<Select
ref={selectRef}
onChange={onOptionSelect}
/>
and in the useEffect.
useEffect(() => {
const selectObj = selectRef?.current
if (selectedOption?.value && selectObj) {
selectObj.state.inputValue = selectedOption?.value
}
}, [selectedOption])
Im filtering using remote mode in the Material-Table component, but after each filtered, and Material-Table rendered, it delete the text or selection from the filter section.
So I would like to understand if there is a way in the table to keep this values, because it is necessary that the user have reference of what he is seeing in the table.
Im using the last version, 1.32
This is the component https://github.com/mbrn/material-table
Best Regards and thanks in advance for your time in my case
Move your columns object to a state.
Make a state var,
const [materialColumn] = useState([{title: "Name",field: "name"}]);
Then on your material table
<MaterialTable
columns={materialColumnObj}
/>
This will solve the problem. The filter text will stay. Cheers!
I'm new to ReactJS. Well I only want to solve this problem, nothing else I want from React. In my already build app, SelectField (of Material-UI) is used, which do not show the selected value. Other than this everything works fine. Here is the Markup:
<SelectField ref="device" selectedIndex={this.state.deviceIndex} displayMember="device_model" valueMember="device_id" menuItems={this.state.devices} onChange={this.onSelectDevice} style={{float:"left", marginTop:"5px", width:"300px"}} />
I want one of the two things:
1. Either solve my problem with the existing SelectField component, after which I will be able to get the selected item. OR
2. Share the method of working with simple HTML Select...
You must pass the menu items to display as children to the SelectField component. This is easy with an inline mapping expression.
Example:
<SelectField selectedIndex={this.state.deviceIndex}>
{this.state.devices.map(device =>
<MenuItem value={device.id} primaryText={device.name}/>
)}
</SelectField>