Warning: React does not recognize the InputProps prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase inputprops instead. If you accidentally passed it from a parent component, remove it from the DOM element.
I don't understand what I'm doing wrong. And I've seen many similar issues like this. But I couldn't see a proper solution.
<TextField
{...input}
{...rest}
name={input.name}
inputRef={inputRef}
autoFocus={inputRef.current === document.activeElement}
disabled={disabled || false}
multiline={rowCount ? true : false}
style={{
width: "100%",
}}
onChange={(event) => {
input.onChange(event.target.value);
}}
{...(hesapla
? {
onBlur: (e) => {
hesapla({ name: input.name, value: input.value });
},
onKeyDown: (e) => {
if (e.key === "Enter") {
hesapla({ name: input.name, value: input.value });
e.preventDefault();
}
},
}
: {})}
InputProps={{
classes,
...(inputComponent ? { inputComponent: inputComponent } : {}),
...(endAdornment ? { endAdornment: endAdornment } : {}),
}}
inputProps={{
style: {
maxHeight: (rowCount * 16).toString() + "px",
overflow: "auto",
...(rightJustify ? { textAlign: "end" } : {}),
...(!readOnly && hesapla
? { fontWeight: "bold", borderBottom: "2px solid" }
: {}),
},
readOnly: readOnly ? readOnly : false,
}}
></TextField>
The problem is with your InputProps object, according to the documentation, it uses an object, you didn't pass a proper object to it.
So, if you want to realize this issue, I suggest you create your InputProps entry as a variable and log it:
const myInputPropsObject = {
classes,
...(inputComponent ? { inputComponent: inputComponent } : {}),
...(endAdornment ? { endAdornment: endAdornment } : {}),
}
console.log(myInputPropsObject)
Note: destruction of an empty object will cause the Uncaught SyntaxError: Invalid or unexpected token issue.
to check it:
const myObject = {
name: 'testName',
...{},
}
the issue is that you are using inputProps instead of InputProps
Related
I wanna asign the email value to the text field but it does not work but When i tried to put it on a text the value is there like for example on a span , the value of emailAddress should be the value of the textfield , any idea why does this not work guys ?
Thanks.
<span style={{paddingTop:5}}>
Full Name: {email.firstName} {email.lastName} {email.emailAddress}
</span>
#html
<TextField
type="text"
style={{ width: "95%" }}
onChange={($event) => emailOnChange($event, prop.id, mIndex)}
label="Email Address"
variant="filled"
name={email.emailAddress}
value={email.emailAddress}
defaultValue={email.emailAddress}
// InputProps={{
// endAdornment: fetching ? (
// <CircularProgress />
// ) : null,
// }}
/>
#ts snippet
const emailOnChange = debounce(function (event, id, index) {
setRoleId(id);
setEmailCurrentIndex(index);
const payload: IYardUserRequestPayload | InitialReqPaylod = {
accountId: 1,
searchString: event.target.value,
};
setFetching(true);
dispatch(getYardUser(payload));
}, 500);
I'm seeing a weird issue with Material UI's Autcomplete component. I have the following code at present:
const [isContactListInitialised, setContactListInitialised] = useState(false);
const toggleContactListInitialised = () => { setContactListInitialised(state => !state) }
const [contactList, setContactList] = useState([]);
...
const newJobStructure = {
name: "",
isJobStartLinked: true,
isJobFinishLinked: true,
outgoingDateTime: moment(),
jobStartDateTime: moment(),
returningDateTime: moment().add(1, "hours"),
jobFinishDateTime: moment().add(1, "hours"),
contactId: -1,
jobTypeId: -1,
deliveryLocationId: -1,
}
const [newJob, setNewJob] = useState(newJobStructure)
const handleNewJobChange = (event) => setNewJob({...newJob, [event.target.name]: event.target.value})
...
useEffect(() => {
if(!isContactListInitialised) { fetchAllContacts(); }
}, [])
...
return(
...
<Autocomplete
id="contacts-group"
options={contactList}
getOptionLabel={(contact) => contact.contactName || ''}
groupBy={(contact) => contact.firstLetter}
value={newJob.contactId}
onChange={(event, value) => setNewJob({...newJob, contactId: value.contactId})}
freeSolo
sx={{ width: "100%", minWidth: 400 }}
renderInput={(params => <TextField {...params} label="Contact Name" />)} />
...
)
Now, as the title explains, when the form is displayed initially, I see the TextField as expected, along with it being blank and having "Contact Name" in it. When I click it, it displays an ordered list, again, as expected.
When I then select an option, the contact.contactName value displays for a split second and then it disappears. However, it still looks populated as the label retreats to the top left corner of the box.
If I then tap the same option again, the contact.contactName value then displays as expected.
What on Earth could be going on here? Is it a bug with my code, or MUI's? how would I be able to get around this?
Thanks!
It seems your option list is in format { contactId: number, contactName: string } which is an object, and the autocomplete has been controlled with value property which is mapped with number type. To solve this issue, do the below changes in your code.
Add property contactName in newJobStructure
const newJobStructure = {
name: "",
isJobStartLinked: true,
isJobFinishLinked: true,
outgoingDateTime: moment(),
jobStartDateTime: moment(),
returningDateTime: moment().add(1, "hours"),
jobFinishDateTime: moment().add(1, "hours"),
contactId: -1,
contactName: '', // Add contactName Property
jobTypeId: -1,
deliveryLocationId: -1
};
Update controlled value and onChange event of autocomplete control as below
<Autocomplete
id="contacts-group"
options={contactList}
getOptionLabel={(contact) => contact.contactName || ''}
groupBy={(contact) => contact.firstLetter}
// value={newJob.contactId}
value={{ contactId: newJob.contactId, contactName: newJob.contactName }} // Update controlled value
// onChange={(event, value) => setNewJob({ ...newJob, contactId: value.contactId })}
onChange={(event, value) => setNewJob({ ...newJob, contactId: value?.contactId ?? -1, contactName: value?.contactName ?? '' })} // Update onChange event
isOptionEqualToValue={(option, value) => option.contactId === value.contactId }
freeSolo
sx={{ width: "100%", minWidth: 400 }}
renderInput={(params => <TextField {...params} label="Contact Name" />)}
/>
I am getting an error which I am not able to understand or shake. What I am trying to do is that on click of a button I am trying to change the value in the text field in the form I created Howerver I am getting this error:
Cannot create property label on string for one of the instances.
Here is the function where I am trying to change the values:
getReport(ReportList) {
this.state.SPCCODE.label = 'NA';
this.state.destinationcode.label = 'NA'
}
I am declaring SPCCODE in the state as
SPCCODE: '',
destinationcode: '',
I am declaring SPCCODE as conditional render in render like so:
let DDL;
const DDLValue = servicecode.label;
if (DDLValue == 'Direct') {
DDL = <> </>;
} else if (DDLValue == 'STYD') {
DDL = <> </>;
} else {
DDL = (
<Col lg="6" style={{ marginTop: '0rem' }}>
<Label for="spcc">SPC</Label>
<Select
className="select"
id="spc"
// value={servicecode}
placeholder="Search spcCode..."
value={hide ? null : SPCCODE}
onChange={this.handleChangeSPC}
options={this.state.spcCode}
isDisabled={this.state.disable}
styles={{
control: (provided, state) => ({
...provided,
boxShadow: 'none',
// borderBottom: "1px dotted pink",
borderBottom: this.state.isEmpty4 ? '1px solid red' : '1px solid black',
}),
}}
/>
</Col>
);
}
I am handling the SPC CODE change in this function:
handleChangeSPC = SPCCODE => {
this.setState({ hide: false });
this.setState({ SPCCODE });
var spc_label = SPCCODE.label;
this.setState({ spc_label });
};
I am calling the g getReport() function from a child component table like this
passVariable() {
this.props.getReport(this.state.ReportList);
}
I am calling this onClick
On researching I am getting that may it is showing the error because the variable is immutable but have not anywhere declared it in const. Please help do not know why exactly this error is showing?
The problem is that you declare SPCCODE as string in the state then trying to access to non-existent property label inside it. It is not possible and throw type error.
To solve it, you must declare it like literal object such as:
SPCCODE: {label:''}
In the below code when i enter a search string and press enter, this is becoming undefined and as a result the function is not getting called.Can anybody please help me understand why? I have tried almost everything but nothing seems to be working neither could i find any pointers to the problem i am facing.
class HomepageBody extends Component{
constructor(props){
super(props);
this.state = {
value :'',
error: null,
isLoaded: false,
array: [],
mobile: ''
}
this.readSearchString = this.readSearchString.bind(this);
this.doSomething = this.doSomething.bind(this);
}
readSearchString(event){
if(event.target.value === ''){
this.setState({
error: null,
array: ''
});
}
else{
this.setState ({
value : event.target.value
});
}
}
doSomething = () => {
fetch(`http://localhost:8080/items?search=${this.state.value}&page=1`,
{
headers: {
'Accept': 'application/json'
}
})
.then(res => res.json())
.then(
(result) => {
if(result.length != 0){
this.setState({
isLoaded: true,
array: result,
error: null
});
}
else{
this.setState({
isLoaded: true,
error : "No matches found",
array: ''
})
}
},
(error) => {
this.setState({
isLoaded: true,
error: "We are experiencing some temporary problem, please try again later"
});
}
)
}
render () {
const {mobile} = this.props;
return(
<Container>
<Header
as='h1'
content='Title'
style={{
fontSize: mobile ? '1.2em' : '3em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: mobile ? '5em' : '3em',
display:'block'
}}
/>
<Input icon={<Icon name='search' inverted circular link />}
placeholder='Search .....'
style={{
fontSize: mobile ? '1em' : '1em',
fontWeight: 'normal',
marginTop: mobile ? '1em' : '1em',
width: mobile ? '280px' : '600px',
}}
onChange={ this.readSearchString }
onKeyPress={(event) => {
if(event.key === 'Enter'){
this.doSomething()
}
}}
focus
/>
</Container>
)
}
}
HomepageBody.propTypes = {
mobile: PropTypes.bool,
}
Thanks,
Vikram
Yes, thats what i had done. But it didn't work. However i figured out a solution. If i'm not using the semantic ui framework's component, then i can define the function inline for onKeyPress and it works without any problems, but when i use the semantic ui framework and use the <Input> component, i have to override the function call. So this is how i did it
<Input>
..........
.........
onKeyPress = {this.onKeyPress}
</Input>
onKeyPress= (e) => {
if(e.key === 'Enter')
this.doSomething();
}
So i presume its got to something to do with semantic ui and the way it handles events within the component.
Set an attribute of tabIndex="0" and it will work.
tabindex="0" allows elements besides links and form elements to
receive keyboard focus. It does not change the tab order, but places
the element in the logical navigation flow, as if it were a link on
the page.
I need to make a calendar with events and I decided to use react-big-calendar. But I need to make events of different colors. So each event will have some category and each category has corresponding color. How can I change the color of the event with react?
Result should look something like this
Sorry, I haven't read the documentation really well. It can be done with the help of eventPropGetter attribute. I've made it like this:
eventStyleGetter: function(event, start, end, isSelected) {
console.log(event);
var backgroundColor = '#' + event.hexColor;
var style = {
backgroundColor: backgroundColor,
borderRadius: '0px',
opacity: 0.8,
color: 'black',
border: '0px',
display: 'block'
};
return {
style: style
};
},
render: function () {
return (
<Layout active="plan" title="Planning">
<div className="content-app fixed-header">
<div className="app-body">
<div className="box">
<BigCalendar
events={this.events}
defaultDate={new Date()}
defaultView='week'
views={[]}
onSelectSlot={(this.slotSelected)}
onSelectEvent={(this.eventSelected)}
eventPropGetter={(this.eventStyleGetter)}
/>
</div>
</div>
</div>
</Layout>
);
}
Additional tip on how to style different kinds of events: In the myEvents array of event objects, I gave each object a boolean property isMine, then I defined:
<BigCalendar
// other props here
eventPropGetter={
(event, start, end, isSelected) => {
let newStyle = {
backgroundColor: "lightgrey",
color: 'black',
borderRadius: "0px",
border: "none"
};
if (event.isMine){
newStyle.backgroundColor = "lightgreen"
}
return {
className: "",
style: newStyle
};
}
}
/>
This solution is simple !
eventPropGetter={(event) => {
const backgroundColor = event.allday ? 'yellow' : 'blue';
return { style: { backgroundColor } }
}}
change the condition according to your need and it is done.
Siva Surya's solution is the fastest, and I have added the color property as well. Thanks...
import React, {useEffect, useLayoutEffect} from 'react';
import { Calendar, momentLocalizer,globalizeLocalizer } from 'react-big-calendar'
import moment from 'moment';
import { connect } from 'frontity';
import BackgroundWrapper from 'react-big-calendar/lib/BackgroundWrapper';
const MyCalendar = ({ actions, state, objetoBloque, formato }) => {
const localizer = momentLocalizer(moment);
const myEventsList = [
{
title: 'My Event',
start: '2022-06-21T13:45:00-05:00',
end: '2022-06-25T14:00:00-05:00',
// elcolor:'red'
colorEvento:'red'
},
{
title: 'Otro',
start: '2022-06-15T13:45:00-05:00',
end: '2022-06-23T14:00:00-05:00',
colorEvento:'green',
color:'white'
}
];
return(
<div>
<Calendar
// defaultDate = {defaultDate}
localizer={localizer}
events={myEventsList}
startAccessor="start"
endAccessor="end"
style={{ height: 500 }}
BackgroundWrapper = "red"
eventPropGetter={(myEventsList) => {
const backgroundColor = myEventsList.colorEvento ? myEventsList.colorEvento : 'blue';
const color = myEventsList.color ? myEventsList.color : 'blue';
return { style: { backgroundColor ,color} }
}}
/>
</div>
)
}
export default connect(MyCalendar);
Searching for how to change the border colour of an event also lead me here, and I couldn't find the answer anywhere else, but found that adding the following done the trick:
border: "black",
borderStyle: "solid"