score:0
you should provide link to this function via props to children or through context.
class parent extends react.component {
constructor(props: any) {
super(props);
this.changedatasource = this.changedatasource.bind(this);
}
state = { value: 'old' }
forceupdate() {
console.log('forceupdate');
}
changedatasource() {
this.setstate({ value: 'updated' });
this.forceupdate();
}
render() {
return (
<div>
<h1>parent</h1>
<p>{this.state.value}</p>
<child func={this.changedatasource} />
</div>
)
}
}
in child.tsx:
type function = (source: any) => void;
type childprops = {
func: function
}
const child = ({ func }: childprops) => {
return (
<div>
<h2>child</h2>
<button onclick={func}>child button</button>
</div>
)
}
with context it will be like this:
const context = react.createcontext<(() => void) | undefined>(undefined);
const child = () => {
const func = react.usecontext(context);
return (
<div>
<h2>child</h2>
<button onclick={func}>child button</button>
</div>
)
}
class parent extends react.component {
constructor(props: any) {
super(props);
this.changedatasource = this.changedatasource.bind(this);
}
state = { value: 'old' }
forceupdate() {
console.log('forceupdate');
}
changedatasource() {
this.setstate({ value: 'updated' });
this.forceupdate();
}
render() {
return (
<context.provider value={this.changedatasource}>
<div>
<h1>parent</h1>
<p>{this.state.value}</p>
{/* deeep in tree */}
<child />
</div>
</context.provider>
)
}
}
Source: stackoverflow.com
Related Query
- React/ES6 -> How to call an React component class method from another component?
- how do you call a method from another react class component
- How to call service class method from functional component in react
- React call a component method from class
- Call a React component method from outside
- Call a React component method from outside
- How do I call a method from another class component in React.js
- Can't call child component method from parent component in React Native
- Call child component method from parent in react
- call instance method from higher order component in react
- Call child method from parent class - React typescript
- Call React component method from within setTimeout
- How to call child component's method from a parent component in React
- Call method of parent class component from child class component
- Call a method within a React Component from Electron's globalShortcut
- React call from class to functional component. Error: Invalid hook call. Hooks can only be called inside of the body of a function component
- React call parent component method from child component method
- How to call returned const from a react function in a class based component
- Pass value from class method to a react component
- React - Dont call method if event is fired from an element currently rendered by this component
- React - Call parent method from within child component
- Call a method pass from parent component to child component in React
- Call component method from React fetch
- React JS: How to call a validation method of a custom Input component from its Parent
- How to call a sub component's method from a main component in React with Typescript?
- Using a method on a React class from a separate component
- React JS / Material UI - Call method from imported Component
- Typescript + React call parent method from child component
- Unable to call react component class from another component class
- How to call a function method in a component class render method? getting Uncaught TypeError: Cannot read property 'value' of null in React
More Query from same tag
- How to hide header and footer when invalid page render
- Mock 'ora' with Jest to see if it was called
- Formik form only validates after second button click? (Using React Hooks, TypeScript, Formik, NextJS)
- Could anybody please help me to rewrite this code using useEffect()?
- can't seems to read the error message in react js(axios) from flask api (using jsonify)
- How to use React Lazy loading for redux connected component?
- How to use bootstrap or css for never appear scrollbar
- unable to load velocity with scrollmagic and react
- Isolating a function when data is mapped in react
- React use onChange from parent
- React Router v6 - Create Invalid Path Redirect
- How To Detect Decimal as a Number in React
- getStaticProps for dynamic products Nextjs
- Map and Render Data from API in ReactJS (Function Components)
- Reactjs frontend with PasswordResetView
- show error if none of the checkboxes are selected
- Image upload MERN stack
- Render a component multiple times React.js
- react i18next introduced a change in the order of Hooks using i18n
- Cannot find module 'react' from '/react/node_modules/react-redux/lib/components'
- Caddy reverse_proxy and React Router
- How to use react-s3-uploader with reactjs?
- can't setState in request.post method
- render function is not rendering items
- React-Table: exception thrown calling 'getResolvedState()' on component ref
- Cannot render grouped cells without row count in reactable
- Is this the correct way for storing a sub-collection?
- I get errors to setup ReactJs Environment
- How do I 'attach' an image in a POST request?
- Trying (and failing) to write if/else expression in JSX