Setting And Updating State In React Js With Dropdown Component From Material Ui

I have this piece of code that calls a web service and displays the names coming from that WS into a Dropdown component from Material UI, What I want to do is to set the default va

Solution 1:

You need to set state of selected dropdown option. And set first value of data as selected value.

componentDidMount() {
 const url = 'https://randomuser.me/api/?results=4';

 fetch(url)
   .then(Response =>Response.json())
   .then(findResponse => {
     console.log(findResponse);
     this.setState({
       data: findResponse.results,
       selected: findResponse.results[0].name.first// need to be sure it's exist
     });
   });
}
handleChange(event, index, value) {this.setState({ selected: value });}
.
.
.
render() {
 return (
   <div><DropDownMenuvalue={this.state.selected}onChange={this.handleChange}>
       {this.renderOptions()}
     </DropDownMenu></div>
 );

}

UPDATED CODE

importReact, { Component } from'react';
importDropDownMenufrom'material-ui/DropDownMenu';
importMenuItemfrom'material-ui/MenuItem';

exportdefaultclassWebserviceTestextendsComponent {
  constructor() {
    super();
    this.state = {
      data: [],
      selected: '',
    };
    this.renderOptions = this.renderOptions.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    const url = 'https://randomuser.me/api/?results=4';

    fetch(url)
      .then(Response =>Response.json())
      .then(findResponse => {
        console.log(findResponse);
        console.log(findResponse.results[0].name.first);
        this.setState({
          data: findResponse.results,
          selected: findResponse.results[0].name.first// need to be sure it's exist
        });
      });
  }
  handleChange(value) {this.setState({ selected: value });}

  //we are creating the options to be displayedrenderOptions() {
    returnthis.state.data.map((dt, i) => {
      return (
        <divkey={i}><MenuItemvalue={dt.name.first}primaryText={dt.name.first} /></div>
      );
    });
  }

  render() {
    return (
      <div><DropDownMenuvalue={this.state.selected}onChange={this.handleChange}>
          {this.renderOptions()}
        </DropDownMenu></div>
    );
  }
}

Solution 2:

this.setState controls the variable this.state in a special way. Whenever you use this.setState it will run render again to check for changes accordingly. Your dynamic content that you want to be responsive should be placed in this.state and those should be shown in your render function.

There are many ways to go about solving your question, but the most important principle to use is to place what you currently want to render (or the id/index number) in this.state and use this.setState to change it as needed.

value={this.state.name} should be a single value from your data structure that you return from your fetch, assuming this is what is shown on the screen.

Also, you forgot to bindthis.handleChange in your constructor.

Stating props in your constructor is perfectly fine to do. You only do that when you want to use something from this.props in your constructor. You aren't, so it's perfectly safe to leave it as constructor() and super()