score:0

you basically want to send data from your child to your parent if i understand well. you can simply pass the valuechange method to your child component, it will call it when it's needed.

here is a repro on stackblitz and here is the code :

import react, { component } from "react";
import { render } from "react-dom";
import "./style.css";

const app = () => {
  const [appstate, setappstate] = react.usestate(null);

  const valuechange = e => {
    e.persist();
    setappstate(prevstate => ({...prevstate, [e.target.name]: e.target.value}));
  };
  return (
    <div>
      child 1: <child valuechange={valuechange} childname="child1" /> 
      <br />
      child 2 :<child valuechange={valuechange} childname="chlid2" />
      <br />
      <br />
      appstate : <pre>{json.stringify(appstate)}</pre>
    </div>
  );
};

const child = ({ valuechange, childname }) => {
  return <input type="text" name={childname} onchange={valuechange} />;
};

render(<app />, document.getelementbyid("root"));


[edit] here is the version with class component:

import react, { component } from "react";
import { render } from "react-dom";
import "./style.css";

class app extends component {
  state = null;

  valuechange(e) {
    e.persist();
    this.setstate(prevstate => ({
      ...prevstate,
      [e.target.name]: e.target.value
    }));
  }
  render() {
    return (
      <div>
        child 1: <child valuechange={(e) => this.valuechange(e)} childname="child1" />
        <br />
        child 2 :<child valuechange={(e) => this.valuechange(e)} childname="chld2" />
        <br />
        <br />
        state : <pre>{json.stringify(this.state)}</pre>
      </div>
    );
  }
}

const child = ({ valuechange, childname }) => {
  return (
    <select name={childname} onchange={valuechange}>
    <option selected>none</option>
    <option value="nat 1">nat 1</option>
    <option value="nat 2">nat 2</option>
    <option value="nat 3">nat 3</option>
  </select>
  );
};

render(<app />, document.getelementbyid("root"));

score:0

import react, { component } from "react";
import { dropdown } from "semantic-ui-react";

const countryoptions = [
  { key: "af", value: "af", flag: "af", text: "afghanistan" },
  { key: "ax", value: "ax", flag: "ax", text: "aland islands" },
  { key: "al", value: "al", flag: "al", text: "albania" },
  { key: "dz", value: "dz", flag: "dz", text: "algeria" },
  { key: "as", value: "as", flag: "as", text: "american samoa" },
  { key: "ad", value: "ad", flag: "ad", text: "andorra" },
  { key: "ao", value: "ao", flag: "ao", text: "angola" },
  { key: "ai", value: "ai", flag: "ai", text: "anguilla" },
  { key: "ag", value: "ag", flag: "ag", text: "antigua" },
  { key: "ar", value: "ar", flag: "ar", text: "argentina" },
  { key: "am", value: "am", flag: "am", text: "armenia" },
  { key: "aw", value: "aw", flag: "aw", text: "aruba" },
  { key: "au", value: "au", flag: "au", text: "australia" },
  { key: "at", value: "at", flag: "at", text: "austria" },
  { key: "az", value: "az", flag: "az", text: "azerbaijan" },
  { key: "bs", value: "bs", flag: "bs", text: "bahamas" },
  { key: "bh", value: "bh", flag: "bh", text: "bahrain" },
  { key: "bd", value: "bd", flag: "bd", text: "bangladesh" },
  { key: "bb", value: "bb", flag: "bb", text: "barbados" },
  { key: "by", value: "by", flag: "by", text: "belarus" },
  { key: "be", value: "be", flag: "be", text: "belgium" },
  { key: "bz", value: "bz", flag: "bz", text: "belize" },
  { key: "bj", value: "bj", flag: "bj", text: "benin" },
  { key: "uk", value: "uk", flag: "uk", text: "united kingdom" },
  { key: "in", value: "in", flag: "in", text: "india" },
];

class countryselect extends component {
  constructor(props) {
    super(props);
    this.state = {
      nationality1: " ",
      nationality2: " ",
    };
  }

  valuechange = (e) => {
    e.persist();
    if (e.target.name === "undefined") {
      return;
    } else {
      this.setstate({
        [e.target.name]: e.target.value,
      });
      console.log(e.target.name);
      console.log(e.target.value);
    }
  };

  selectcountry = ({ valuechange, childname }) => {
    return (
      <dropdown
        placeholder="select country"
        name={childname}
        fluid
        search
        selection
        options={countryoptions}
        onchange={valuechange}
      />
    );
  };

  render() {
    return (
      <div>
        child 1:{" "}
        <this.selectcountry
          valuechange={this.valuechange}
          childname="nationality1"
        />
        <br />
        child 2 :
        <this.selectcountry
          valuechange={this.valuechange}
          childname="nationality2"
        />
        <br />
      </div>
    );
  }
}

export default countryselect;

````

Related Query

More Query from same tag