I have a child component that renders a list (after processing some complex logic) that is passed to it from parent using props
Problem
If parent passes an invalid list then child renders nothing and parent shows a empty li
I want to check if child has not rendered any thing so that li can be removed.
Introducing new dependency (noticing parent) won't help in reusability.
You shouldn't provide bad data to components - filter them before passing down.
Obvious answer is to not render li externally - render it inside a child.
To preserve reusability pass this <li /> as a 'tag' or 'component' prop to child and render conditionally (decorate content) when defined. It's quite common pattern in react. You can also use render props pattern.
Related
I am running some tests with react to find out a way for a parent to send an "event" to a child component. In the test application, the parent (CounterController) has a button. When the button is clicked, the parent shall send a reset "event" to the child (Counter) to reset the current count. Like below.
I am new to react, and can not find a way to dispatch/receive events or messages between components. I had a thought to mark the "reset" request as a "state" in the parent, then pass it to the child through props. Then the child clear the "reset" state, through a callback function, to avoid repeating "reset" requests. However, I got the code run into an infinite loop. Here are my codes.
The parent component - CounterController
The child component - Counter
the error logs
I do not feel that I am using react the right way, by asking the child to do something from the parent. Anyway, any idea about how to implement this app in react? How should the data flow be built correctly? Thanks!
You can move up the counter state on the parent ‘CounterController’
and then you pass the counter and setCounter as props to ‘Counter’
You don’t need ‘reset’ state
I am posting my thoughts about using react (as a beginner), and my solution to the app.
treat the react components as the "view" of the application, and maintain the data and controls in the hooks.
create a custom hook to wrap up all data and controls.
create an instance of the custom hook in the top component - display the data in HTML elements and bound controls to buttons to build the app UI
Here are my codes for this simple UI
UI
useCounter hook
counterController component
counter component
Move "count" state from child component (Counter) to parent
component (CounterController).
Pass count state as prop to child component.
Pass increment and decrement methods from parent to child component through props.
Note: Remove reset state, it's not required anymore.
Sandbox link : https://codesandbox.io/s/infallible-platform-vo4qtv?file=/src/CountController.js
I have 2 stateful class-based components nested within my main app, a parent class-based component. From child component 1, I've successfully called a parent callback method. From within that parent callback I want to call a method of child component 2, so I can setState of #2 without re-rendering the parent component. I've seen that many devs make the children stateless or even just omit them. However, React encourages devs to "componenatize" ... pointers plz!
if that's the case then you shoud consider lifting the state up to the parent: https://reactjs.org/docs/lifting-state-up.html
your child component should only then call parent methods to update the state, that way, you will have a unidirectional flow of data as what a react app should be. Basically, it encourages you to have a single source of truth and ensure synchronisation of data across your app. Besides it removes unnecessary logic like what you are doing right now:
What does the "single source of truth" mean?
Storing the data in the parent's state and then allowing both children to update it via setStates wouldn't violate the concept of "componentizing" as long as the two children have narrowly declared inputs. If one child needs to update data inside another child, you can jump up a context level and store it in the parent- then an update of the data from either child will trigger a render of both children ensuring the display stays synchronized with the data while keeping the data in a single place (with the parent instead of split between the children).
Bingo, yes I can use a "React ref" to call an instance method of a child component. A ref is an attribute on a component instance. So, right now my child component uses its componentDidUpdate to call a callback in my parent, and the parent callback then uses refs to call an "update" method of specific child components. These update methods setState on child component and voila.
So a colleague explained that calling setState in my main app actually will call setState on all children components (related by JSX expressions). Even though I liked the idea of nesting my event handlers within their relevant child components, it seems that the best practice pattern is to have all handlers in the main app, setState in the main app, then let React do its thing
I have a situation where the parents class depends on if the children have content.
<div className="parent">
<div className="child1"></div>
<div className="child2"></div>
<div className="child3"></div>
</div>
For example if child1 is the only child that has content the parent class should be "a", if child1 and child2 have content the parent class should be "ab", etc. Each child maintains their own state, meaning a child could begin with content and through state changes have none at the end. I'm looking at using Higher Order Components and references to solve this issue but haven't found a great solution yet. Wondering if there's a build pattern to help with this problem.
My understanding of traditional React would suggest that if a parent component depends on the state of child components, then that state variable should really be maintained by a shared grandparent like so:
<Grandparent> //Maintains State
<Parent> // receives Grandparent state and state manipulation functions as props
<Child 1> // receives Grandparent state and state manipulation functions as props (via Parent)
<Child ...n> // same as child one.
You'll end up passing functions defined as methods on all the way down to so changes triggered on can impact the state variable on and the props are passed down new.
Passing functions and state down and up the tree can get messy, so depending on how many levels you have to your tree, and how much state you are passing around, you could take a look at redux to simplify the flow. Redux acts as a state container outside the React hierarchy, making universal state variables readily accessible at any level of the tree.
I was going through a code and found that
this.props.formVisibility = false
As one cannot update the properties in react's component, the code shouldnt have work but the execution went without any errors.
Now I am wondering, On what conditions one is able to edit props in the component?
Suppose you have parent - child relationship. where parent's state pass as props to child component then whenever you want to update props you need to update parents state not props in child component. once state get updated this will update to props as well in child component hope so it clear the point
refer : https://gist.github.com/sebkouba/a5ac75153ef8d8827b98
I have an angularjs component with 2 child components. I want to call a function in product-list component when on-added output triggers in new-product component.
<h1>{{vm.store.title}}</h1>
<product-list store-id="vm.storeId"></product-list>
<new-product store-id="vm.store.id" on-added="$ctrl.productAdded()"></new-product>
The productAdded method is in product-list component and re-initiate the product list.
Any help will be appreciated.
In this case I think would be better using a common parent component and make the product-list a dumb component which receive a list and display it only. So that the parent take care of this management this list and the product-list take care of rendering the list. This, allows you to handle the state from a parent component, as new-product is dumb as well, it'll emmit changes to the parent and propagate the new list state to the child (a.k.a. product-list).
For example, consider using something similar to this raw tree of components:
<product-manager store-id="$ctrl.storeId">
<h1>{{vm.store.title}}</h1>
<product-list products="vm.store.products"></product-list>
<new-product on-added="vm.productAdded(product)"></new-product>
</product-manager>
Or perhaps:
<products-page store="$ctrl.store">
<h1>{{ $ctrl.store.title }}</h1>
<product-list products="$ctrl.store.products"></product-list>
<product-form on-save="$ctrl.productAdded(product)"></product-form>
</products-page>
The previous examples are raw representation of a component tree and its templates, in a real situation you'd have <products-page store="$ctrl.store"></products-page> because it's internal nodes would be defined by its template on the component definition.