score:2
Accepted answer
below is an example how button
could send some data to component info
when they are related as siblings, e.g.
app
|
|
--------|--------
| |
| |
button info
code:
class app extends react.component {
state = {
// now the state is duplicated because clickcounter lives both
// inside button and app. you could just leave the clickcounter in
// app and remove it from button. then you would also pass the
// clickcounter to button as props as you pass it to info.
// this way state would not be duplicated and in general it is advised
// in react to not duplicate state.
clickcounter: 0
};
render() {
return (
<div>
<button
clickhandler={cc => {
this.setstate({ clickcounter: cc });
}}
/>
<info counter={this.state.clickcounter} />
</div>
);
}
}
class info extends react.component {
render() {
return (
<div>
<p>info: {this.props.counter}</p>
</div>
);
}
}
class button extends react.component {
state = {
clickcounter: 0
};
handleclick = () => {
this.props.clickhandler(this.state.clickcounter + 1);
this.setstate(prevstate => {
return { clickcounter: prevstate.clickcounter + 1 };
});
};
render() {
return (
<div>
<button onclick={this.handleclick}>click</button>
<p>clicks: {this.state.clickcounter}</p>
</div>
);
}
}
const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);
<div id="root"></div>
<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>
for other scenarios, refer to this.
score:0
what do you want here can be done with lifting state up in react. you can't pass any data to siblings without lifting the state up or using some global store solutions like redux.
- lift your state up to a parent component.
- since you will use this state, define a function to be used here.
- refactor your other components as dumb ones since you won't need any state there. of course, if you plan to use other states related to those components you can use any state there, but it is not necessary for this one.
- pass your click handler as a prop to your
button
component, so you can change the state. - pass the related data where do you want to show your state.
class app extends react.component {
state = {
clickcounter: 0,
};
handleclick = () =>
this.setstate( prevstate => ( {
clickcounter: prevstate.clickcounter + 1,
} ) );
render() {
const { clickcounter } = this.state;
return (
<div>
<button onclick={this.handleclick}>click</button>
<p>clicks data in parent: {clickcounter}</p>
<lvlchecker clickcounter={clickcounter} />
</div>
);
}
}
const button = props => (
<div>
<button onclick={props.onclick}>click</button>
</div>
);
const lvlchecker = props => (
<div>clicks data in lvlchecker: {props.clickcounter}</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>
Source: stackoverflow.com
Related Query
- How would you transfer data between components in React?
- How can i share data between non-related components in react js?
- How to transfer state between React components with hooks?
- How to transfer data between components - react?
- How can I pass data between two React components, but the two components have no parent-child relationship?
- How to pass data between two react components having no relation
- How to transfer data between two child component in react js?
- Data transfer between components in React
- How to Pass Data between React Components ReactJS
- How to pass data using React useState between Material UI components
- How to pass data between functional components in React?
- How to communicate UI state changes between React components with Redux?
- ReactJS How to transfer data between pages?
- how to import data in react from a js file to use in components
- How can I share state data between components using custom hooks?
- How to share React Components between projects
- How to make pure, generic React components with immutable data that needs to be transformed
- How to show loading animation between React Router components
- Sharing data between components in React
- Passing Data between react components
- How should child components in React communicate between each other in a clean and maintainable fashion?
- How to share data between more than two React applications?
- How to share asset requests between components using react hooks?
- React Redux: How to share data between reducers?
- Sharing data between React components
- React JS How to pass data between pages in Hook ( useEffect)
- How to pass down data through 3 class components in react correctly?
- How to pass objects and states between two components in React
- How to use router for switching between components with a key value pair in react
- How to do Server Side Rendering in React With React Loadable and Fetching Data for Components (Like Next.js)?
More Query from same tag
- How to use conditional operator in react js
- Nextjs fatal production only error after adding new package
- "ERROR db._checkNotDeleted is not a function" when trying to update my database
- styled components change style based on class without props
- Update specific object in array in state
- What is the alternative for selected default in React?
- Git ignore public/index.html
- How to use constructor value outside constructor?
- Component definition is missing display name for forwardRef
- Give opacity 0.5 to the 30% of scrollable div
- React wrapper component (HOC) does not re-render child component when it's props are changing
- How to pass an argument from a parent to a child componentin ReactJs?
- Stuck with the installation of React.js
- Is there a way to use the nested route ID as a prop argument in React Router
- Can I set value of an object by accessing other values in this object?
- how to set the before property of css according to the component that is getting rendered in switch case
- Fetched data from ajax in component is not rendering in React
- How to download file from AWS S3 using getObject in Reactjs?
- How to wait result of a function in React?
- Testing React component with Jest gives 'Cannot find module' error
- Javascript getters: calling a getter from within another getter
- How can i add more than one new Column to a React-Data-Grid?
- Maximum update depth exceeded when counting values of array in state
- antd - How to generate scriptUrl in Custom Font Icon
- How to refactor && () when returning component
- How do i get which element is clicked/focused in blur event of another element
- How to pass multiple states in Router Link (Menu Navigation) in reactJS
- React - dynamic properties from strings
- Timeouts in Reactjs?
- React component with ajax call - life-cycle