How to find object in array and show it in React component?
1
I have array of cities with objects like this:
[{id: 1, name: 'New York'}, {id: 2, name: 'London'} ...]
and I have a value of id.
I put elements (names) from array to select list. But I need to add first option with value from array (name) which have the corresponding id which I can't make it work.
My component:
const propTypes = {
cities: PropTypes.array,
enteredEvent: PropTypes.array
};
class newEvent extends Component {
constructor(props) {
super(props);
this.state = {
showInOption: ''
};
this.handleDictionary = this.handleDictionary.bind(this);
this.searchTypeEvent = this.searchTypeEvent.bind(this);
}
componentDidMount() {
this.searchTypeEvent();
}
handleDictionary(e) {
...
}
searchTypeEvent() {
if (this.props.enteredEvent.cityid !== null && this.props.enteredEvent.cityid !== undefined) { // if I have id value
const type = this.props.cities.find(el => el.id === this.props.enteredEvent.cityid); // find an object with id
this.setState({ showInOption: type.name });
}
this.setState({ showInOption: 'Select something' });
}
render() {
return (
<div>
<select onChange={this.handleDictionary}>
<option>{this.state.showInOption}</option> // here I need to add a value
{this.props.cities.map(item => { // here I call other options
return (<InputSelect key={item.id} directory={item}/>);
})}
</select>
</div>
);
}
}
I have an error:
Uncaught TypeError: Cannot read property 'name' of undefined
How can I fix it?
javascript reactjs
edited Nov 13 at 14:50
Hemadri Dasari
7,29611239
asked Nov 13 at 14:35
Jack
547
|
show 5 more comments
1
I have array of cities with objects like this:
[{id: 1, name: 'New York'}, {id: 2, name: 'London'} ...]
and I have a value of id.
I put elements (names) from array to select list. But I need to add first option with value from array (name) which have the corresponding id which I can't make it work.
My component:
const propTypes = {
cities: PropTypes.array,
enteredEvent: PropTypes.array
};
class newEvent extends Component {
constructor(props) {
super(props);
this.state = {
showInOption: ''
};
this.handleDictionary = this.handleDictionary.bind(this);
this.searchTypeEvent = this.searchTypeEvent.bind(this);
}
componentDidMount() {
this.searchTypeEvent();
}
handleDictionary(e) {
...
}
searchTypeEvent() {
if (this.props.enteredEvent.cityid !== null && this.props.enteredEvent.cityid !== undefined) { // if I have id value
const type = this.props.cities.find(el => el.id === this.props.enteredEvent.cityid); // find an object with id
this.setState({ showInOption: type.name });
}
this.setState({ showInOption: 'Select something' });
}
render() {
return (
<div>
<select onChange={this.handleDictionary}>
<option>{this.state.showInOption}</option> // here I need to add a value
{this.props.cities.map(item => { // here I call other options
return (<InputSelect key={item.id} directory={item}/>);
})}
</select>
</div>
);
}
}
I have an error:
Uncaught TypeError: Cannot read property 'name' of undefined
How can I fix it?
javascript reactjs
edited Nov 13 at 14:50
Hemadri Dasari
7,29611239
asked Nov 13 at 14:35
Jack
547
You try to find an item by a search term by looking at the ids, is that intended?el.id === this.props.enteredEvent.cityname. You must also make sure that you actually find atypebefore trying to accessnameon it.
– Tholle
Nov 13 at 14:38
It's unknown whatcityname. If it derives from an input, it's unlikely that it is a number that can pass===check.
– estus
Nov 13 at 14:39
@Tholle this.props.enteredEvent.cityid is correct. My mistake in post. I get object which I need (after find), but I can't get name value
– Jack
Nov 13 at 14:51
@estus this.props.enteredEvent.cityid is correct. My mistake in post
– Jack
Nov 13 at 14:51
Writeconsole.log(type);right after thefindand you will getundefinedas the error says. I think it's a good idea to guard against the case when thecityiddoesn't match acitiesobject id.
– Tholle
Nov 13 at 14:55
|
show 5 more comments
1
1
1
I have array of cities with objects like this:
[{id: 1, name: 'New York'}, {id: 2, name: 'London'} ...]
and I have a value of id.
I put elements (names) from array to select list. But I need to add first option with value from array (name) which have the corresponding id which I can't make it work.
My component:
const propTypes = {
cities: PropTypes.array,
enteredEvent: PropTypes.array
};
class newEvent extends Component {
constructor(props) {
super(props);
this.state = {
showInOption: ''
};
this.handleDictionary = this.handleDictionary.bind(this);
this.searchTypeEvent = this.searchTypeEvent.bind(this);
}
componentDidMount() {
this.searchTypeEvent();
}
handleDictionary(e) {
...
}
searchTypeEvent() {
if (this.props.enteredEvent.cityid !== null && this.props.enteredEvent.cityid !== undefined) { // if I have id value
const type = this.props.cities.find(el => el.id === this.props.enteredEvent.cityid); // find an object with id
this.setState({ showInOption: type.name });
}
this.setState({ showInOption: 'Select something' });
}
render() {
return (
<div>
<select onChange={this.handleDictionary}>
<option>{this.state.showInOption}</option> // here I need to add a value
{this.props.cities.map(item => { // here I call other options
return (<InputSelect key={item.id} directory={item}/>);
})}
</select>
</div>
);
}
}
I have an error:
Uncaught TypeError: Cannot read property 'name' of undefined
How can I fix it?
javascript reactjs
edited Nov 13 at 14:50
Hemadri Dasari
7,29611239
asked Nov 13 at 14:35
Jack
547
I have array of cities with objects like this:
[{id: 1, name: 'New York'}, {id: 2, name: 'London'} ...]
and I have a value of id.
I put elements (names) from array to select list. But I need to add first option with value from array (name) which have the corresponding id which I can't make it work.
My component:
const propTypes = {
cities: PropTypes.array,
enteredEvent: PropTypes.array
};
class newEvent extends Component {
constructor(props) {
super(props);
this.state = {
showInOption: ''
};
this.handleDictionary = this.handleDictionary.bind(this);
this.searchTypeEvent = this.searchTypeEvent.bind(this);
}
componentDidMount() {
this.searchTypeEvent();
}
handleDictionary(e) {
...
}
searchTypeEvent() {
if (this.props.enteredEvent.cityid !== null && this.props.enteredEvent.cityid !== undefined) { // if I have id value
const type = this.props.cities.find(el => el.id === this.props.enteredEvent.cityid); // find an object with id
this.setState({ showInOption: type.name });
}
this.setState({ showInOption: 'Select something' });
}
render() {
return (
<div>
<select onChange={this.handleDictionary}>
<option>{this.state.showInOption}</option> // here I need to add a value
{this.props.cities.map(item => { // here I call other options
return (<InputSelect key={item.id} directory={item}/>);
})}
</select>
</div>
);
}
}
I have an error:
Uncaught TypeError: Cannot read property 'name' of undefined
How can I fix it?
javascript reactjs
javascript reactjs
edited Nov 13 at 14:50
Hemadri Dasari
7,29611239
asked Nov 13 at 14:35
Jack
547
edited Nov 13 at 14:50
Hemadri Dasari
7,29611239
asked Nov 13 at 14:35
Jack
547
edited Nov 13 at 14:50
Hemadri Dasari
7,29611239
edited Nov 13 at 14:50
Hemadri Dasari
7,29611239
edited Nov 13 at 14:50
Hemadri Dasari
7,29611239
7,29611239
asked Nov 13 at 14:35
Jack
547
asked Nov 13 at 14:35
Jack
547
asked Nov 13 at 14:35
Jack
547
547
You try to find an item by a search term by looking at the ids, is that intended?el.id === this.props.enteredEvent.cityname. You must also make sure that you actually find atypebefore trying to accessnameon it.
– Tholle
Nov 13 at 14:38
It's unknown whatcityname. If it derives from an input, it's unlikely that it is a number that can pass===check.
– estus
Nov 13 at 14:39
@Tholle this.props.enteredEvent.cityid is correct. My mistake in post. I get object which I need (after find), but I can't get name value
– Jack
Nov 13 at 14:51
@estus this.props.enteredEvent.cityid is correct. My mistake in post
– Jack
Nov 13 at 14:51
Writeconsole.log(type);right after thefindand you will getundefinedas the error says. I think it's a good idea to guard against the case when thecityiddoesn't match acitiesobject id.
– Tholle
Nov 13 at 14:55
|
show 5 more comments
You try to find an item by a search term by looking at the ids, is that intended?el.id === this.props.enteredEvent.cityname. You must also make sure that you actually find atypebefore trying to accessnameon it.
– Tholle
Nov 13 at 14:38
It's unknown whatcityname. If it derives from an input, it's unlikely that it is a number that can pass===check.
– estus
Nov 13 at 14:39
@Tholle this.props.enteredEvent.cityid is correct. My mistake in post. I get object which I need (after find), but I can't get name value
– Jack
Nov 13 at 14:51
@estus this.props.enteredEvent.cityid is correct. My mistake in post
– Jack
Nov 13 at 14:51
Writeconsole.log(type);right after thefindand you will getundefinedas the error says. I think it's a good idea to guard against the case when thecityiddoesn't match acitiesobject id.
– Tholle
Nov 13 at 14:55
You try to find an item by a search term by looking at the ids, is that intended?
el.id === this.props.enteredEvent.cityname. You must also make sure that you actually find a type before trying to access name on it.– Tholle
Nov 13 at 14:38
You try to find an item by a search term by looking at the ids, is that intended?
el.id === this.props.enteredEvent.cityname. You must also make sure that you actually find a type before trying to access name on it.– Tholle
Nov 13 at 14:38
It's unknown what
cityname. If it derives from an input, it's unlikely that it is a number that can pass === check.– estus
Nov 13 at 14:39
It's unknown what
cityname. If it derives from an input, it's unlikely that it is a number that can pass === check.– estus
Nov 13 at 14:39
@Tholle this.props.enteredEvent.cityid is correct. My mistake in post. I get object which I need (after find), but I can't get name value
– Jack
Nov 13 at 14:51
@Tholle this.props.enteredEvent.cityid is correct. My mistake in post. I get object which I need (after find), but I can't get name value
– Jack
Nov 13 at 14:51
@estus this.props.enteredEvent.cityid is correct. My mistake in post
– Jack
Nov 13 at 14:51
@estus this.props.enteredEvent.cityid is correct. My mistake in post
– Jack
Nov 13 at 14:51
Write
console.log(type); right after the find and you will get undefined as the error says. I think it's a good idea to guard against the case when the cityid doesn't match a cities object id.– Tholle
Nov 13 at 14:55
Write
console.log(type); right after the find and you will get undefined as the error says. I think it's a good idea to guard against the case when the cityid doesn't match a cities object id.– Tholle
Nov 13 at 14:55
|
show 5 more comments
2 Answers
2
active
oldest
votes
0
It seems you need filter.It will return an array of object
let a = [{
id: 1,
name: 'New York'
}, {
id: 2,
name: 'London'
}]
function b(idToSearch) {
return a.filter(item => {
return item.id === idToSearch
})
};
console.log(b(1))answered Nov 13 at 14:41
brk
25.4k31939
I need to print name value. How can I do it?
– Jack
Nov 13 at 14:47
add a comment |
0
Try this
const type = Array.isArray(this.props.cities) && this.props.cities.find(el => el.id ==this.props.enteredEvent.cityid);
this.setState({ showInOption: type ? type.name : null });
Make sure the name you enter matches with any one of the object in array
answered Nov 13 at 14:39
Hemadri Dasari
7,29611239
It isn't work for me. type is undefined.
– Jack
Nov 13 at 14:58
When I call this function from option and in function I return value, this function called 6 times, and in last call I get the object value (I catch it, using console.log). Maybe React doesn't have time to perform this function?
– Jack
Nov 13 at 15:00
I updated my answer. Can you please give a try now
– Hemadri Dasari
Nov 13 at 15:06
no, it isn't help for my. I think there is asynchronous React problem
– Jack
Nov 13 at 15:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283348%2fhow-to-find-object-in-array-and-show-it-in-react-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
It seems you need filter.It will return an array of object
let a = [{
id: 1,
name: 'New York'
}, {
id: 2,
name: 'London'
}]
function b(idToSearch) {
return a.filter(item => {
return item.id === idToSearch
})
};
console.log(b(1))answered Nov 13 at 14:41
brk
25.4k31939
I need to print name value. How can I do it?
– Jack
Nov 13 at 14:47
add a comment |
0
It seems you need filter.It will return an array of object
let a = [{
id: 1,
name: 'New York'
}, {
id: 2,
name: 'London'
}]
function b(idToSearch) {
return a.filter(item => {
return item.id === idToSearch
})
};
console.log(b(1))answered Nov 13 at 14:41
brk
25.4k31939
I need to print name value. How can I do it?
– Jack
Nov 13 at 14:47
add a comment |
0
0
0
It seems you need filter.It will return an array of object
let a = [{
id: 1,
name: 'New York'
}, {
id: 2,
name: 'London'
}]
function b(idToSearch) {
return a.filter(item => {
return item.id === idToSearch
})
};
console.log(b(1))answered Nov 13 at 14:41
brk
25.4k31939
It seems you need filter.It will return an array of object
let a = [{
id: 1,
name: 'New York'
}, {
id: 2,
name: 'London'
}]
function b(idToSearch) {
return a.filter(item => {
return item.id === idToSearch
})
};
console.log(b(1))let a = [{
id: 1,
name: 'New York'
}, {
id: 2,
name: 'London'
}]
function b(idToSearch) {
return a.filter(item => {
return item.id === idToSearch
})
};
console.log(b(1))let a = [{
id: 1,
name: 'New York'
}, {
id: 2,
name: 'London'
}]
function b(idToSearch) {
return a.filter(item => {
return item.id === idToSearch
})
};
console.log(b(1))answered Nov 13 at 14:41
brk
25.4k31939
answered Nov 13 at 14:41
brk
25.4k31939
answered Nov 13 at 14:41
brk
25.4k31939
answered Nov 13 at 14:41
brk
25.4k31939
25.4k31939
I need to print name value. How can I do it?
– Jack
Nov 13 at 14:47
add a comment |
I need to print name value. How can I do it?
– Jack
Nov 13 at 14:47
I need to print name value. How can I do it?
– Jack
Nov 13 at 14:47
I need to print name value. How can I do it?
– Jack
Nov 13 at 14:47
add a comment |
0
Try this
const type = Array.isArray(this.props.cities) && this.props.cities.find(el => el.id ==this.props.enteredEvent.cityid);
this.setState({ showInOption: type ? type.name : null });
Make sure the name you enter matches with any one of the object in array
answered Nov 13 at 14:39
Hemadri Dasari
7,29611239
It isn't work for me. type is undefined.
– Jack
Nov 13 at 14:58
When I call this function from option and in function I return value, this function called 6 times, and in last call I get the object value (I catch it, using console.log). Maybe React doesn't have time to perform this function?
– Jack
Nov 13 at 15:00
I updated my answer. Can you please give a try now
– Hemadri Dasari
Nov 13 at 15:06
no, it isn't help for my. I think there is asynchronous React problem
– Jack
Nov 13 at 15:23
add a comment |
0
Try this
const type = Array.isArray(this.props.cities) && this.props.cities.find(el => el.id ==this.props.enteredEvent.cityid);
this.setState({ showInOption: type ? type.name : null });
Make sure the name you enter matches with any one of the object in array
answered Nov 13 at 14:39
Hemadri Dasari
7,29611239
It isn't work for me. type is undefined.
– Jack
Nov 13 at 14:58
When I call this function from option and in function I return value, this function called 6 times, and in last call I get the object value (I catch it, using console.log). Maybe React doesn't have time to perform this function?
– Jack
Nov 13 at 15:00
I updated my answer. Can you please give a try now
– Hemadri Dasari
Nov 13 at 15:06
no, it isn't help for my. I think there is asynchronous React problem
– Jack
Nov 13 at 15:23
add a comment |
0
0
0
Try this
const type = Array.isArray(this.props.cities) && this.props.cities.find(el => el.id ==this.props.enteredEvent.cityid);
this.setState({ showInOption: type ? type.name : null });
Make sure the name you enter matches with any one of the object in array
answered Nov 13 at 14:39
Hemadri Dasari
7,29611239
Try this
const type = Array.isArray(this.props.cities) && this.props.cities.find(el => el.id ==this.props.enteredEvent.cityid);
this.setState({ showInOption: type ? type.name : null });
Make sure the name you enter matches with any one of the object in array
answered Nov 13 at 14:39
Hemadri Dasari
7,29611239
edited Nov 13 at 15:06
answered Nov 13 at 14:39
Hemadri Dasari
7,29611239
answered Nov 13 at 14:39
Hemadri Dasari
7,29611239
answered Nov 13 at 14:39
Hemadri Dasari
7,29611239
7,29611239
It isn't work for me. type is undefined.
– Jack
Nov 13 at 14:58
When I call this function from option and in function I return value, this function called 6 times, and in last call I get the object value (I catch it, using console.log). Maybe React doesn't have time to perform this function?
– Jack
Nov 13 at 15:00
I updated my answer. Can you please give a try now
– Hemadri Dasari
Nov 13 at 15:06
no, it isn't help for my. I think there is asynchronous React problem
– Jack
Nov 13 at 15:23
add a comment |
It isn't work for me. type is undefined.
– Jack
Nov 13 at 14:58
When I call this function from option and in function I return value, this function called 6 times, and in last call I get the object value (I catch it, using console.log). Maybe React doesn't have time to perform this function?
– Jack
Nov 13 at 15:00
I updated my answer. Can you please give a try now
– Hemadri Dasari
Nov 13 at 15:06
no, it isn't help for my. I think there is asynchronous React problem
– Jack
Nov 13 at 15:23
It isn't work for me. type is undefined.
– Jack
Nov 13 at 14:58
It isn't work for me. type is undefined.
– Jack
Nov 13 at 14:58
When I call this function from option and in function I return value, this function called 6 times, and in last call I get the object value (I catch it, using console.log). Maybe React doesn't have time to perform this function?
– Jack
Nov 13 at 15:00
When I call this function from option and in function I return value, this function called 6 times, and in last call I get the object value (I catch it, using console.log). Maybe React doesn't have time to perform this function?
– Jack
Nov 13 at 15:00
I updated my answer. Can you please give a try now
– Hemadri Dasari
Nov 13 at 15:06
I updated my answer. Can you please give a try now
– Hemadri Dasari
Nov 13 at 15:06
no, it isn't help for my. I think there is asynchronous React problem
– Jack
Nov 13 at 15:23
no, it isn't help for my. I think there is asynchronous React problem
– Jack
Nov 13 at 15:23
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283348%2fhow-to-find-object-in-array-and-show-it-in-react-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You try to find an item by a search term by looking at the ids, is that intended?
el.id === this.props.enteredEvent.cityname. You must also make sure that you actually find atypebefore trying to accessnameon it.– Tholle
Nov 13 at 14:38
It's unknown what
cityname. If it derives from an input, it's unlikely that it is a number that can pass===check.– estus
Nov 13 at 14:39
@Tholle this.props.enteredEvent.cityid is correct. My mistake in post. I get object which I need (after find), but I can't get name value
– Jack
Nov 13 at 14:51
@estus this.props.enteredEvent.cityid is correct. My mistake in post
– Jack
Nov 13 at 14:51
Write
console.log(type);right after thefindand you will getundefinedas the error says. I think it's a good idea to guard against the case when thecityiddoesn't match acitiesobject id.– Tholle
Nov 13 at 14:55