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:''}
Related
I am using {message} from the props in a component in the ReactJS.
The code is given below
import React from "react";
const MyMessage = ({ message }) => {
if (message?.attachments?.length > 0) {
return (
<img
src={message.attachments[0].file}
alt="message_attachment"
className="message-image"
style={{ float: "right" }}
/>
);
}
const msg = JSON.stringify(message);
console.log("fmsg = "+ msg.sender)
console.log("mes = "+JSON.stringify(message))
console.log("now = "+msg.first_name)
return (
<div
className="message"
style={{
float: "right",
marginRight: "18px",
color: "white",
backgroundColor: "#3B2A50",
}}
>
{message?.text}
</div>
);
};
export default MyMessage;
What I tried?
I used the following console stmts:
console.log(message); -> [Object Object]
console.log(JSON.stringify(message));
{
"id":455890,
"sender":{
"username":"GMmohit",
"first_name":"Mohit",
"last_name":"Maroliya",
"avatar":"https://api-chat-engine-io.s3.amazonaws.com/avatars/potrait_rKDI2hb.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAZA5RH3EC2MM47GFP%2F20220213%2Fca-central-1%2Fs3%2Faws4_request&X-Amz-Date=20220213T141431Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=1d5e0ec2418701210532824ba90af5f6366d17b7fa1f9dfadb6783cd8efdbfd6",
"custom_json":"{}",
"is_online":true
},
"created":"2022-02-12 12:23:04.745937+00:00",
"attachments":[],
"sender_username":"undefined",
"text":"----",
"custom_json":"{}"
}
const msg = JSON.stringify(message)
console.log("now = "+msg.first_name) -> but it gives undefined
How can I access the values in {message} like username,first_name etc? However, I am able to access message?.text .
It looks like your username and first name are coming off the sender object in your message. You'll need to consider the sender like:
message.sender.username
to access the username that is in the sender object in the message.
If you are stringifying your json, you will not be able to take data from it, because it will serve as a whole string not as an object.
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
I'm working on my first ever web-app and bootstrapped this app, I'm having trouble changing the URL of an API get request. I'm using react-select to create a dropdown menu, and I want the dropdown selection to alter search criteria, for example:
I have a baseurl.com/
and want to create a variable based off the dropdown selection, to append to the baseurl.
My two options from the dropdown are 'Name' and 'Birthday',
and if you select 'Name', the URL would be
baseurl.com/Patient?name= + inputvalue.
and if you select 'birthday', the URL will be
baseurl.com/Patient?birthdate=eq + inputvalue
I want to keep the baseURL as is because I will have to add more options to the select eventually. I've already got the inputvalue working in my app so I don't need to make changes to it I believe.
Here is some of my code so far, which gives me a "Cannot read property 'value' of undefined" error" when I make a selection. Also I haven't yet made the component to store the state as a variable, but I'll cross the bridge when it comes to it 😅 Any insight is appreciated, thanks :
const choice = [
{value : "Name", label: "Name" },
{value : "bDay", label: "Birthday (YYYY-MM-DD)"}
];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: 'Search',
queryResult: {},
criteria: '',
showSVG: false
};
this.handleChange = this.handleChange.bind(this);
this.getInputValue = this.getInputValue.bind(this);
this.baseURL = this.baseURL.bind(this);
}
getInputValue(e) {
this.setState({ inputValue: e.target.value });
}
handleChange(e) {
this.setState({criteria: e.target.value});
console.log(e.target.value);
}
baseURL(e) {
const url = 'https://baseURL.com/';
[BLOCK FOR FETCH REQUEST]
render() {
return (
<div className="input-wrapper">
{/* ON CHANGE SELECT */}
<Select options={choice} value={this.state.criteria} onChange={this.handleChange} />
<input
type="text"
value= {this.state.inputValue}
onFocus = {() => this.setState({ inputValue: '' })}
onChange={this.getInputValue}
onKeyDown={this.baseURL} />
<img className={this.state.showSVG ? "isVisable" : ""} src="assets/icons/grid.svg" />
{ Object.keys(this.state.queryResult).length !== 0 ? <PatientInfoBlock data={this.state.queryResult} /> : null }
{ !this.state.queryResult ? <h3>Sorry no results match ''{this.state.inputValue}''</h3> : null }
</div>
);
}
'''
handleChange should be:
handleChange(selectedOption) {
this.setState({criteria: selectedOption});
}
selectedOption type is:
{
value: string,
label: string
}
Figured it out, thanks to armin yahya for pointing me towards the right direction, as I was not aware of the selectedOption type. Here's what I ended up writing that has my handleChange function working properly and updating the URL for the API call:
handleChange(selectedOption) {
if(selectedOption.value == 'Name') {
this.setState({criteria: 'Patient?name='});
}
if(selectedOption.value == 'bDay') {
this.setState({criteria: 'Patient?birthdate=eq'});
}
I have a header component where I need to render three buttons, so every three buttons have three props. One is the class name, click handler and text.
So out of three buttons, two buttons act as a toggle button, so based on the click the text should change.
See the below code:
class App extends Component(){
state = {
navigationList: [{
text: 'Signout',
onClickHandler: this.signoutHandler,
customClassName: 'buttonStyle'
}, {
text: this.state.isStudents ? 'Students' : 'Teachers',
onClickHandler: this.viewMode,
customClassName: 'buttonStyle'
}, {
text: this.state.activeWay ? 'Active On' : 'Active Hidden',
onClickHandler: this.activeWay,
customClassName: 'buttonStyle'
}]
}
signoutHandler = () => {
// some functionality
}
viewMode = () => {
this.setState({
isStudents: !this.state.isStudents
})
}
activeWay = () => {
this.setState({
activeWay: !this.state.activeWay
})
}
render(){
return (
<Header navigationList={this.state.navigationList}/>
)
}
}
const Header = ({navigationList}) => {
return (
<>
{navigationList && navigationList.map(({text, onClickHandler, customClassName}) => {
return(
<button
onClick={onClickHandler}
className={customClassName}
>
{text}
</button>
)
})}
</>
)
}
The other way is I can pass all the props one by one and instead of an array I can write three button elements render it, but I am thinking to have an array and render using a map.
So which method is better, the problem that I am facing is if use the array. map render
the approach I need to set the initial value as a variable outside and how can I set the state.
And I am getting the onClick method is undefined, is it because the function is not attached to the state navigation list array.
Update
I declared the functions above the state so it was able to call the function.
So in JS, before the state is declared in the memory the functions should be hoisted isn't.
class App extends React.Component {
constructor(props){
super();
this.state = {
isStudents:false,
activeWay:false,
}
}
createList(){
return [{
text: 'Signout',
onClickHandler: this.signoutHandler.bind(this),
customClassName: 'buttonStyle'
}, {
text: this.state.isStudents ? 'Students' : 'Teachers',
onClickHandler: this.viewMode.bind(this),
customClassName: 'buttonStyle'
}, {
text: this.state.activeWay ? 'Active On' : 'Active Hidden',
onClickHandler: this.activeWay.bind(this),
customClassName: 'buttonStyle'
}];
}
signoutHandler(){
}
viewMode(){
this.setState({
isStudents: !this.state.isStudents
})
}
activeWay(){
this.setState({
activeWay: !this.state.activeWay
})
}
render(){
return (
<div>
<div>ddd</div>
<Header navigationList={this.createList()} />
</div>
)
}
}
const Header = ({navigationList}) => {
console.log(navigationList);
return (
<div>
{navigationList && navigationList.map(({text, onClickHandler, customClassName}) => {
return(
<button
onClick={onClickHandler}
className={customClassName}
>
{text}
</button>
)
})}
</div>
)
}
ReactDOM.render(<App />, document.querySelector("#app"))
https://jsfiddle.net/luk17/en9h1bpr/
Ok I will try to explain, If you see you are using function expressions in your class and as far as hoisting is concerned in JavaScript, functions expressions are not hoisted in JS only function declarations are hoisted, function expressions are treated as variables in JS.
Now for your case you don't have to shift your functions above the state, you can simply use constructor for initializing state as
constructor(props) {
super(props);
this.state = {
isStudents: false,
activeWay: false,
navigationList: [
{
text: "Signout",
onClickHandler: this.signoutHandler,
customClassName: "buttonStyle"
},
{
text: "Teachers",
onClickHandler: this.viewMode,
customClassName: "buttonStyle"
},
{
text: "Active Hidden",
onClickHandler: this.activeWay,
customClassName: "buttonStyle"
}
]
};
}
Now you will have your handlers available as it is
Sandbox with some modification just to show
EDIT:
You can have default text for buttons and change it when clicking,
Sandbox updated
Hope it helps
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.