score:2
as tried to explain in the comments you can use callbacks for this, but try to avoid to get a value from child component like that. you can keep selected
state in your parent component. your item
component does not need to keep a state at all for this. with proper handlers from the parent, you can update your state easily.
class app extends react.component {
state = {
items: [
{ id: "1", name: "foo", quantity: 1 },
{ id: "2", name: "bar", quantity: 2 },
{ id: "3", name: "baz", quantity: 3 },
],
selected: "",
}
handleselect = item => this.setstate({ selected: item.id })
render() {
const { items } = this.state;
return (
<div>
selected item: {this.state.selected}
{
items.map( item =>
<item key={item.id} item={item} onselect={this.handleselect} />
)
}
</div>
);
}
}
const item = props => {
const { item, onselect } = props;
const handleselect = () => onselect( item );
return (
<div style={{border: "1px solid gray"}} onclick={handleselect}>
<p><strong>item id:</strong> {item.id}</p>
<p><strong>item name</strong>: {item.name}</p>
<p><strong>item quantity</strong>: {item.quantity}</p>
</div>
)
}
reactdom.render(<app />, document.getelementbyid("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
score:3
passing props from child to parent component works using callback functions in react. or you can also use state management library like redux and store the data in child component and get the data in parent component.
the example below illustrate how to send props from child to parent. i am sharing below example to make you understand how you can send props from child to parent.
itemselection: parent component
//handler function
getpropsfromchild = (id, name) => {
console.log(id, name);
}
//pass down your handler function to child component as a prop
<div classname="row">
{this.state.items.map(i => <item ref="item" id={i.id} name={i.name} getpropsfromchild={this.getpropsfromchild} quantity={i.quantity} />)}
</div>
item: child component
componentdidmount(){
//access handler function passed to your item component and access it using this.props and send the values as you want to the function
this.props.getpropsfromchild(“01”, “hi”);
}
Source: stackoverflow.com
Related Query
- Passing state from a child to parent component
- React, passing state from a Child component to the Parent
- Passing state from a child component to another child component contained within a parent component
- How can i initialize state by passing props from parent component to child component in ReactJS?
- React - I am passing state from a child to a parent component but the state value is off by one update cycle
- Passing state from child to parent component in react
- Passing a state from child component to parent component in React?
- Can't change State from child component even after passing a function from parent component
- Closing react-bootstrap popup modal by passing function from parent component to child component via props not updating state
- Passing state from child component to parent component in a Wordpress Gutenberg Sidebar
- React router-dom passing state from parent component to child router component showing undefined in child
- passing data from the parent component state to the child component using React.createContext
- React js change child component's state from parent component
- 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?
- passing data from child to parent component - react - via callback function
- Sharing state from parent to child component in React
- Access child state of child from parent component in react
- Passing API data from parent container to child component in React
- 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
- Pass state from child component to parent component
- Update parent state from child component and re-render this child when parent state is update
- Why can't I see parent state from child component event handler?
- Passing state from child class to parent
- How to update the correct state value in a parent component that gets its value from a child component using hooks in react?
More Query from same tag
- How to validate type "target.dataset" attribute of input tag in typescript
- How to access firebase result outside then method React
- How to use jinja2 server side rendering alongside react without violating inline-script CSP
- React : SortableJS: Exclude some last elements from sorting
- When to use inputRef.current instead of this.inputRef React.js?
- .simulate('click') only working when done twice on the same component, through ID and Class
- React: animationOut not showing using Animated.css
- Call function after refetchQueries
- How to read a local server JSON file with react?
- React JS Sementic UI keeps saying: "ReferenceError: jQuery is not defined"
- Mock with jest causes warnings: correct casing, tag is unrecognized and unknown properties
- Rendering async promises through function components
- Why do I get 401 for static fies when using Express with React.js?
- AXIOS CORS PROBLEM. Server has "Access-Control-Allow-Origin: *" but Axios can't see it. why?
- onclick changes all mapped items instead of just one
- Using the source version instead of mimified when import lib with reactjs and npm
- (React) Reason Why can't resolve img css background img in css?
- How to set the state of a useState hook on page load?
- React Router typescript Property 'redirectUrl' does not exist on type '{}'
- how to fixed footer in bottom
- How do I display a byte array image from a backend that uses AWS S3, in a React component?
- How should I use "redux-thunk" for Async Initial state ? (react/redux)
- create-react-app error import type * as PrettyFormat from './types' in pretty-format
- Redux State not updating. Redux tools show empty
- Component is not found even though package has been imported
- Axios only fetches Azure API response ONCE
- how to define a literal type based on a value inside an object
- store.subscribe() not working in helper service function on state change
- Error on passing down function with argument to grandchild in React
- Errors with clipboard.js in React component?