ivos
commented
6 years ago Hi, reading the code I would suggest you call setState() within a .then() block after the fetch(). When you have setState() call like this, it will fire after fetch() but BEFORE the fetch has finished. In this case however I would expect the select field to be empty.
If you managed to fill the select with values from the API, like the image suggests, what exactly is the problem, why can't you "select an item"? Is there any error in the console? What happens when you try to select an item?
Hi,
Somebody have a example using react-forms-ui/SelectField invoking REST API provided by server Nodejs?
I trying to make a example but i can select a item from SelectField
I am using the REST API https://swapi.co/api/planets/
This is my snippet:
const itemDescription = item => { return item.name }
const MatchEdit = React.createClass({ render() { . . .<SelectField id="selectFree" label="Competition" classes={fieldClasses} load={this.getPlanets} formatItem={itemDescription} /> }
getPlanets : function (){ return new Promise(resolve => { setTimeout(() => { resolve(this.state.planets) }, 300) }) } componentDidMount() { let initialPlanets = []; var url = 'https://swapi.co/api/planets/'; fetch(url) .then(response => { return response.json(); }).then(data => { initialPlanets = data.results.map((planet) => { return planet }); console.log("initialPlanets:"+ JSON.stringify(initialPlanets)); this.setState({ planets: initialPlanets, }); }); }
})
export default withRouter(MatchEdit)
This render the SelectField but I cant select an item from the Form