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;
````
Source: stackoverflow.com
Related Query
- Semantic UI Dropdown , trying to set state from child to parent
- React Set Child State From Parent Dropdown Menu
- react js set state from parent to child component
- Can i set state in parent from child using useEffect hook in react
- In React, how can a parent component set state from the response an async fetch function performed in a child component?
- React hooks - set state of Parent from child via function
- React - set state of parent component to close modal from a child component
- How can I set the state of my parent component from the child component when using react-router?
- How to set state of parent component from a child component in react?
- How to Set a state of parent component from child component in react js
- How to set the state of parent component in react from inside child component
- useContext with React Hooks to set state of parent from child
- How to set state in parent from one child component and access the state in another child component using react and typescript?
- How to set a particular state of a parent component from child component in React?
- React js change child component's state from parent component
- ReactJS: Control a child state from the child and the parent
- Updating Parent Component State from Child Component with UseState React Hook
- ReactJS modify parent state from child component
- Can we pass setState as props from one component to other and change parent state from child component in React?
- Passing state as props from Parent to Child in React-Router?
- React update state in parent from child components
- Sharing state from parent to child component in React
- How to Change Parent State from Child - Mobx State Tree?
- Access child state of child from parent component in react
- Passing state from a child to parent component
- ReactJS: Child component updates before parent state is set
- How to test state that has been lifted up from child to parent component in React?
- How to update parent state from child component in React + send a paramater
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- Prevent child's state from reset after parent component state changes also get the values of all child components:ReactJS+ Typescript
More Query from same tag
- React Redux reducers
- Calling an API as a non-blocking call JavaScript
- Testing onClick event on react component using Jasmine
- What is the difference between domElement and pageContext when using them within an spfx react project?
- Jest snapshot testing React component with randomly generated id (uuid)
- How to show validation message on <TagsInput> react premade component on unique value
- how can I access an array inside an object?
- how to set axios timeout
- React component event handler can't find this
- Show slider controlling all content once when returning map items in React
- how to debug react router not loading component on url change
- React useEffect runs every time I scroll after using hooks
- error messages under the relevant input fields automatically from Django Rest API by react hooks
- React Conditional Classname in my parent container
- React state don't update a filter on a component
- How can I add a display name to a component defined in an object?
- Why This destructure property not working
- Material-UI with reactjs: How to use or implement breadcrumbs
- React how to update array useState on button click
- Tailwind classes not working after page refresh in production
- index.js:2178 Warning: Each child in an array or iterator should have a unique "key" prop. - reactjs
- React Window How to Pass in Components?
- React - custom layout of children components
- react exclude config files from build
- how to use separate validation form in react js
- eslint: Parsing error: Unexpected token during import
- FaunaDB returns multiple instances of the same item due to an array attribute, why?
- how to not display an icon based on the props value using react and typescript?
- ModuleParseError with NextJs
- How to put props.children in JSX tag