0

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"));
Mauricio Maroto
  • 119
  • 1
  • 2
  • 11
  • check `handleChange` method in `TheMapDropdown32` and check the duplicate question, you should be able to figure out the issue – Shubham Khatri Jan 22 '18 at 16:37
  • Wow, it worked. TBH, I also tried setting the console log in the callback as a 2nd parameter inside the SetState method, but it didn't worked. Only after I did as you said (as a *function*), it did worked. May I know why? – Mauricio Maroto Jan 22 '18 at 17:53
  • Because setState callback takes the second argument as a function and not a expression – Shubham Khatri Jan 22 '18 at 18:22
  • I guess that makes sense. Thank you. – Mauricio Maroto Jan 22 '18 at 18:55
  • Hi again, so I ran into a new question. The data is pased ok (from the dropdown component to another one). But the only way I could do it was to create another state in the new component. So, is that valida? I mean it works, but so I have a dropdown comp with state, passing data to another comp with its own state, you know to have dinamic data as well. I guess this is because since I am using a semantic ui react component and the way it is already created. Any thoughts? – Mauricio Maroto Jan 23 '18 at 13:53
  • Are the two of your dropdowns siblings of one other – Shubham Khatri Jan 23 '18 at 14:30
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163727/discussion-between-mauricio-maroto-and-shubham-khatri). – Mauricio Maroto Jan 23 '18 at 15:03

0 Answers0