could you please tell me why I am getting this error:
Objects are not valid as a React child (found: object with keys {seo_val, text_val}). If you meant to render a collection of children, use an array instead.
I am trying to hit http
request and try to make dropdown .
import React from "react";
class DropDown extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
}
render() {
const makeDropDown = () => {
console.log(this.data);
return this.props.data.map(x => {
return <option>{x}</option>;
});
};
return (
<div>
<div>
<select>{makeDropDown()}</select>;
</div>
</div>
);
}
}
export default DropDown;
Full error message:
Objects are not valid as a React child (found: object with keys {seo_val, text_val}).
Error is very clear, you are trying to render an object in jsx that contains two keys:
seo_val: "..."
text_val: "..."
Write it like this, (render the value that you want):
return <option key={x.seo_val}>{x.text_val}</option>;
Looks like x
is an object.
Try
import React from "react";
class DropDown extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
}
render() {
return (
<div>
<div>
<select>{
this.props.data.map(x => {
return (<option key={x}>echo</option>);
})
}</select>;
</div>
</div>
);
}
}
export default DropDown;
And you'll see it works. Replace echo
with {x}
throws the error you mentioned.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.