I have a list of Material UI Cards with a Select list inside each card.
const ads = this.props.ads;
let adsItems = ads.map((c, i) =>
<div key={ads[i].adid}>
<Card>
<CardHeade>
<SelectField
id={String(ads[i].adid)}
value={ads[i].status}
onChange={this.handleChange}>
<MenuItem key={1} value={`Idle`} primaryText={`Idle`} />
<MenuItem key={2} value={`Sent`} primaryText {`Sent`} />
</SelectField>
</CardHeader>
</Card>
</div>
);
Now when selecting a MenuItem I want to know which Card or selectField was changed. If I could simply pass the SelectField id in into the onChange={this.handleChange} in this case the id is ads[i].adid this would be solved simply.
I took a look at the Material UI docs and even their examples show when you select one MenuItem all the SelectFields get updated with the same value.
Is there any way I can know which Card or SelectField is being changed, that would help me greatly.
Thanks
You can just simply pass the id to change event like you said.
onChange={(event) => this.handleChange(event, ads[i].adid)}
if you do like below it won't work because you would be executing it rather than passing it as a prop.
// THIS WON'T WORK
onChange={this.handleChange(ads[i].adid)}
Related
I am trying to implement a free text filter view with MUI. The Autocomplete component already has that view implemented (when the 'multiple' attribute is set). But I don't want to choose values from a predefined list of options. I want to be able to enter free text sentences.
Any idea on how to implement that?
Thanks #RyanCogswell for this suggestion.
Attached are a link to the solution and the code below:
import * as React from "react";
import Autocomplete from "#mui/material/Autocomplete";
import TextField from "#mui/material/TextField";
export default function KeywordFilter() {
return (
<Autocomplete
multiple
freeSolo
id="keyword-filter"
options={[]}
getOptionLabel={(option) => option}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Filter Keywords"
/>
)}
/>
);
}
I created a drop-down select with react-select. I import some defaultValues with this.returnLayers (an array with value/label couples) and I add the possible options from the state this.state.completeData.
Code :
<SettingRow>
<div className="selection">
<p>Sélectionner des couches</p>
<Select
defaultValue={this.returnLayers}
isMulti
name="layers"
onChange={(e) => { this.getLayers(e, this.state.categName) }}
className="basic-multi-select"
classNamePrefix="select"
options={this.state.completeData}
/>
</div>
</SettingRow>
Everything works well, until I try to delete one of the defaultValues. When I click on one of those options, all of the defaultValues disappear. The newly selected values stay though.
I followed exactly the code from the documentation, so I don't really understand what could be wrong. Is it impossible to delete the defaultValues ? Is there a workaround ?
First, please look at my code.
I re-write my code to make it clear. So no need to worry about import things!
const test = () => {
return (
<label >
<input type='file' multiple style={{ display: 'none' }} />
<Tooltip title='Upload Files'>
<IconButton>
<AddBox color='primary' fontSize='large'/>
</IconButton>
</Tooltip>
</label>
)
}
Here, with this code, I'm trying to open input type="text" when I click IconButton.
But seems there is no change.
I tried a few different ways, however it didn't work well :/
FYI, Here is the picture of AddBox button that I want to use on behalf of input type='text'.
I'm not good at English so please be understanding!
I'm looking forward to hearing from you!!
Try this
const Test = () => {
return (
<label htmlFor='file'>
<input
id='file'
type='file'
multiple
style={{ position: 'fixed', top: '-100em' }}
onChange={e => console.log(e.target.files)}
/>
<Tooltip title='Upload Files'>
<IconButton component='span'>
<RiAddBoxFill color='primary' fontSize='large' />
</IconButton>
</Tooltip>
</label>
);
};
I created this code based on Material UI example (https://mui.com/components/buttons/#upload-button) and it already tested
Notes :
the htmlFor attribute in label and id in input used to connect both elements to make the label trigger input click if the value matched. See this : https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for (in plain js we use for but in react we use htmlFor probably because for keyword is reserved for javascript for loop)
IconButton need component='span' props (I'm not sure about this, by default it use button but when I tried it failed to trigger the input click, probably because button element blocking the label element)
EDIT: In Safari, the input gets disabled when hidden with display: none. A better approach would be to use position: fixed; top: -100em. Source: https://stackoverflow.com/a/28075416/10661914
EDIT: to get the files use onChange on the input element, code already updated
I am trying to create a video conference, what I need is to join the room by entering a link to the textbox.
Right now, I have able to get the textbox value but the problem is I cannot go to another link. Can anyone help me with this?
function Home(){
const [data,setData] = useState(null)
const [print, setPrint] = useState(false);
function getData(val){
setData(val.target.value)
setPrint(false)
}
return(
<React.Fragment>
<h3>Welcome, Instructor</h3>
<hr />
{
print?
<h1>{data}</h1>
:null
}
{/* Link supposed to be here */}
<TextField label="Room ID" onChange={getData} />
<hr/>
<Button variant="contained" color="primary" onClick={() => setPrint(true)}>JOIN ROOM</Button>
</React.Fragment>
)
}
export default Home;
You can use Link in react-router-dom
<Link to={`/${data}`}>Join</Link>
<TextField label="Room ID" onChange={getData} />
What you specifically need, is using the textbox information, you want to generate dynamic links.
In such a case, we can be certain that, we need to use the dynamic information to create the link, which can be achieved either by concatenation
const name = "Mike";
console.log("Hello" + name); // Hello Mike
or you can use string interpolation / templating
const name = "Mike";
console.log(`Hello` ${name}`); // Hello Mike
Both of these are Javascript features and have nothing to do with React specifically.
The React specific information here is, whenever variables inside JSX part of components change, re-renders are caused and thus links will be updated.
So, anything like <a href=`https://example.com/some/random/${stateVariable}/chat` />
At the moment I have the following code:
<List {...props} bulkActionButtons={false}>
<Datagrid>
<DeleteButton undoable={false} />
</Datagrid>
</List>
The pop asks me if I really want to delete this item with the following UUID...
In matters of UX I have to display the title of the item to delete, NOT the UUID.
Neither do I want to use that undo stuff, so I have set it to false.
Thanks for helping!