What is the best approach to update the state in React efficiently? I have a dropdown menu with a list of countries and a table that displays the selected country along with its cities. The table should dynamically update based on the user's selection from the dropdown.
The code below successfully filters the table data for the initially selected country. However, it fails to display the correct data when the country is changed for the second time.
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
const useStyles = makeStyles(theme => ({
button: {
margin: theme.spacing(1)
},
input: {
display: "none"
}
}));
class App extends Component {
state = {
selectedCountry: "",
countries: []
};
constructor() {
super();
this.state.countries = [
this.createData("US", "DC"),
this.createData("UK", "London"),
this.createData("Aus", "Canberra"),
this.createData("US", "Newyork"),
this.createData("UK", "Birmingham"),
this.createData("Aus", "Sidney")
];
}
createData(country, capital) {
return { country, capital };
}
handleChange(value) {
this.setState({ selected: value });
this.setState({
countries: this.state.countries.filter(c => c.country === value)
});
}
render() {
return (
<div className="App">
<label value="Select Country: ">Select Country: </label>
<Select
style={{ width: "10%" }}
value={this.state.selected}
onChange={event => this.handleChange(event.target.value)}
name="country"
displayEmpty
>
<MenuItem value="" disabled>
Select a country
</MenuItem>
<MenuItem value="US">US</MenuItem>
<MenuItem value="UK">UK</MenuItem>
<MenuItem value="AUS">Aus</MenuItem>
</Select>
<Table>
<TableHead>
<TableRow>
<TableCell align="center">Country</TableCell>
<TableCell align="center">Capital city</TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.state.countries.map(row => (
<TableRow key={row.name}>
<TableCell align="center">{row.country}</TableCell>
<TableCell align="center">{row.capital}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}
}
export default App;