score:3
try to keep you application state at the highest most level in the component tree. the easy way out in this case is to let your table component handle the data state, and also supply event handlers. pass these down as props to the row, and further down as needed. proof of concept: https://jsfiddle.net/dannyjolie/4jfxeag8/1/
the general rule of thumb is to never use component state at all, and leverage all change in application change to the very top most component, but input fields is sometimes an exception from the rule as you may not want to modify the application state while typing.
the basics of it:
export default class table extends react.component {
constructor(props) {
super(props);
this.state.cells = ['foo', 'bar']; // fetch something from your store, or better, pass the cells as props from parent component
this.handlesubmitevent = this.handlesubmitevent.bind(this);
this.handlechangeevent = this.handlechangeevent.bind(this);
}
handlesubmitevent () {
// up to date cells are stored in this.state
}
handlechangeevent (value, cell) {
// all values are available in this.state, do with that as you wish :)
}
render () {
....
<row handlesubmitevent={this.handlesubmitevent}
handlechangeevent={this.handlechangeevent}
data={this.state.cells} />
....
}
}
score:1
react only pours data changes and, if necessary, re-renders the changed part of dom from top to bottom. what you can do is give a child component access to parent component's state through props:
class parentcomponent extends component {
handlewhatever(updated) {
this.setstate({
whatever: updated
});
}
render() {
return (
<childcomponent onedit={::this.handlewhatever} />
);
}
}
and
class childcomponent extends component {
render() {
return (
<somethingeditable onchange={this.props.onedit} />
);
}
}
so, the idea is:
- in
parentcomponent
, you define a method that, when called, changes this component's state, i.e.parentcomponent
's. - in
childcomponent
, you're having something that is capable of calling a function every time it is changed (the most common example:input
element and itsonblur
event). - every time you change something inside
childcomponent
, it calls the function that has been passed fromparentcomponent
, which, in turn, provides data in bottom-to-top direction and delivers it toparentcomponent
. - the function is called, bound to
parentcomponent
, sosetstate
gets called then, which changes the state ofparentcomponent
, and it reflects (or not) in re-render of the whole subtree (react takes care of picking only those components that really have to be re-rendered).
this is a classic way to solve the problem of moving data in direction that is opposite to how react expects it to flow.
you can have as many nesting layers as you need, just don't forget to pass that function through all the layers.
Source: stackoverflow.com
Related Query
- React - Accessing updated values from nested components
- How to get values from child components in React
- Change values in React Context from a nested class component
- React hooks not returning updated state values inside callback function from library events (FabricJS)
- React accessing state in nested components
- How to wait for evaluating values in React from nested requests?
- Get data from server and pass values to sub components in React (useEffect, useFetch..)
- Nextjs: How to use ContextAPI with multiple values all of which need to be updated from child components
- React accessing a parent method from generated children components
- Accessing common functions/data from React components
- aggregate values from nested collection of JSON into React table
- Accessing foreign key values from Redux to map values into card components
- Passing values from react components to constants file
- React triggering navigation from nested components
- React state wrongly updated in nested components with CodeMirror 6 Editor
- In React components implemented with hooks, how can the latest component state values be read from within setInterval?
- How can I accessing nested component in react from parent component?
- How to remove duplicate values from an array of objects in react for select components of MUI
- Problem accessing nested data from a GraphQL query in React with TypeScript
- How to pass the values from different components using React js
- How do I stop nested React components that dispatch Redux actions which update state from getting stuck in an infinite loop?
- Accessing values from an eventListener inside a React Hook with an empty dependancy array
- How to properly print values from a nested loop in a react render() method?
- How can I prevent event bubbling in nested React components on click?
- React hooks: accessing up-to-date state from within a callback
- Rendering React Components from Array of Objects
- Generating a PDF file from React Components
- Accessing Redux Store from routes set up via React Router
- Accessing React component children props from the parent
- Call external Javascript function from react components
More Query from same tag
- Why is my page not updating with the addition of an element to my array when using React
- onSubmit function in react not firing
- Passing props in a component that is stored in a variable
- add object to initial state in reducer
- How can I grab multiple mapped elements using useRef?
- How to upload a file with strapi and get the URL?
- SetInterval only run for first time
- Module not found: Error: Can't resolve './App' from React 18 w/TypeScript
- react-redux react-router store not available in props
- react-intl - accessing nested messages
- Passing variables to React components gives "unknown property errror"
- How to hide one of the radio button. React
- Running a function within a React expression
- Reading getBoundingClientRect values from ref callback in React
- How to connect and disconnect socket depending on specific routes in react
- How to update component state with react-compound-timer getTime() method
- How to stop a useEffect function with a condition?
- Why React detect the function reference as new?
- React + Firebase v3 - how to get a 2nd reference to firebase to update a single item
- Download CSV files with HttpClient in ReactJS
- The problem with redux not working on button click
- NextJS dynamically add button onClick
- Matching current route with react router
- select options wont show in react
- How to split a React Component by words to apply a different styling to each word?
- Replace all html style attributes with React compatible styles
- React does not update State (React-Hooks)
- What's the best way to bind a form submission to a relevant state object/array (nb the form was generated by mapping over another state array)
- Focus and tabIndex for React popup
- Grommet integration with create-react-app