I am using a Semantic-ui-react dropdown component with states. As it is, each dropdown clicked option updates state accordingly (clicking on 'Biomasa' logs 1, then clicking on 'Eólica' logs 2, and so on). Ok.
Then, I want to pass that data to a Parent. I decided to do it by wrapping the dropdown component inside another one. Luckily, I will be able to render different Google Maps Markers (given the selected dropdown option).
Problem is: the passed data is lagged (as you can see in the log), why is that? Sandbox here.
import React from "react";
import ReactDOM from "react-dom";
import { Dropdown } from "semantic-ui-react";
import { Marker } from "react-gmaps";
const sen_data3 = [
{
text: "Biomasa",
value: 1,
key: "biomasa"
},
{
text: "Eólica",
value: 2,
key: "eolica"
},
{
text: "Geotérmica",
value: 3,
key: "geotermica"
},
{
text: " Hidroeléctrica",
value: 4,
key: "hidroelectrica"
},
{
text: "Residuo Sólido",
value: 5,
key: "residuo"
},
{
text: "Solar",
value: 6,
key: "solar"
},
{
text: "Térmica",
value: 7,
key: "térmica"
}
];
class TheMapDropdown32Markers extends React.Component {
receiveChild = valueData => {
console.log("valueData passed to Parent", valueData);
};
render() {
console.log("valueData passed to parent", this.receiveChild());
return (
<div>
<div>Hey, filter</div>
<TheMapDropdown32 onChange2={this.receiveChild} />
</div>
);
}
}
class TheMapDropdown32 extends React.Component {
state = {
valueData: undefined
};
handleChange = (evt, { value }) => {
this.setState({ valueData: value });
this.props.onChange2(this.state.valueData);
};
render() {
console.log("this.state.valueData Child", this.state.valueData);
return (
<Dropdown
placeholder={"Seleccione Categoría"}
options={sen_data3}
selection
value={this.state.valueData}
onChange={this.handleChange}
/>
);
}
}
ReactDOM.render(<TheMapDropdown32Markers />, document.getElementById("gmaps"));