Dynamic dropdown list react axios get request
Dynamic dropdown list react axios get request
Inside of my main App.js componentDidMount() lifecycle phase I have an axios get request to a rest service.
App.js componentDidMount()
EDIT: Included full UserForm.js
UserForm.js
class App extends Component {
// default state object
constructor() {
super();
this.state = {
schemas:
}
}
componentDidMount() {
axios
.get('http://localhost:port/querier/api/rest/dataschema/list')
.then(response => {
console.log(response)
this.setState({
schemas: response
});
})
.catch(error => console.log(error.response));
}
render() {
return (
App
);
}
}
This request is successful in returning an array of schemas(strings) (only 1 for now) in the console messages
Response:
{
"data": [
"Phone Record"
],
"status": 200,
"statusText": "OK"
How can I populate this UserForm.js dropdown list with the Phone Record that was returned by the axios get request
UserForm.js
Phone Record
import React from 'react';
import PropTypes from 'prop-types';
class UserForm extends React.Component {
constructor() {
super();
this.state = {schemas: };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.data});
}
handleSubmit(event) {
alert('The dataschema you picked is: ' + this.state.schemas);
event.preventDefault();
}
render() {
return (
Pick the dataschema to describe your data file:
{
(schemas && schemas.length > 0) && schemas.map((schema) => {
return ( {schema.name});
})
}
);
}
}
export default UserForm;
I have updated with my current changes
– DJ2
Jul 3 at 15:47
You have a typo in your App component, in
state, schemas is plural. Should be <UserForm schemas={this.state.schemas} />– Chad Moore
Jul 3 at 16:40
state
schemas
<UserForm schemas={this.state.schemas} />
Was a copy and paste error, I have
schemas– DJ2
Jul 3 at 16:42
schemas
2 Answers
2
I believe you are looking for something like this, where the schemas are passed to the UserForm and the options for the select are rendered dynamically. I've filled out a little bit more of your code snippet, for context.
UPDATED: I fixed a few typos in the code snippet and provided a way for you to handle the schemas being undefined.
NOTE: This should head you in the right direction, you should be able to take this answer, and complete your work.
class App extends React.Component {
constructor() {
this.state = {
schemas:
}
}
componentDidMount() {
axios
.get('http://localhost:port/api/rest/dataschema/list')
.then(response => {
console.log(response)
this.setState({
schemas: response
});
})
.catch(error => console.log(error.response));
}
render() {
return (
App
);
}
}
class UserForm extends React.Component {
render() {
const schemas = this.props.schemas;
return (
Pick the dataschema to describe your data file:
{
(schemas && schemas.length > 0) && schemas.map((schema) => {
return ( {schema});
})
}
)
}
}
I think you will have an error with setState in this way, see this post stackoverflow.com/questions/36693898/…
– N.Safi
Jul 2 at 19:10
Am getting
Type error: cannot read property 'map' of undefined at this line schemas.map((schema) => { I think it's because the rendering of component occurs before the component receives the array.– DJ2
Jul 2 at 19:30
Type error: cannot read property 'map' of undefined
schemas.map((schema) => {
You need to check that schemas is not empty / undefined. See my edits.
– Chad Moore
Jul 2 at 19:38
@N.Safi with arrow functions this should work.
– Chad Moore
Jul 2 at 19:40
@ChadMoore that's what I thought
– N.Safi
Jul 2 at 19:46
The solution to pass the records to UserForm
componentDidMount() {
const self = this;
axios
.get('http://localhost:port/api/rest/dataschema/list')
.then(response => {
console.log(response)
self.setState({ phoneRecords: response })
})
.catch(error => console.log(error.response));
}
render() {
return (
App
);
}
Isn't this still a hard coded solution? I need a dynamic state to populate the dropdown list with all strings (schemas) in the array that are present when the get request to the rest service is performed.
– DJ2
Jul 2 at 18:49
@DJ2 no, because he just gets the date and passes by props, the hardcode lives inside UserForm right? The component which makes a request it's a container and he is don't know how this data is rendered he just pass on data.
– ralfting
Jul 2 at 19:05
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
In your UserForm component, you are not accessing the schemas from props. See my answer below again. Make sure that you are passing the schemas to UserForm in your App component, and make sure that in UserForm's render() method you are retrieving the schemas array from props.
– Chad Moore
Jul 3 at 1:22