I have a React component I built for a popup. PopupContent will receive a DOM element or another React component as a child.
class PopupContent extends React.Component {
render() {
return(
<div>
{React.cloneElement(this.props.children, {closePopup:this.props.closePopup})}
</div>
);
}
}
The closePopup prop sets a flag to show/hide the popup
closePopup(event){
event.preventDefault();
this.setState({
popupInView: false
})
}
The reason to pass closePopup to child is to close the popup from the child component.
This setup works well if the child is a custom React component:
<PopupContent>
<ContentOfThePopup />
</PopupContent>
But I get the Unknown Prop Warning if the child is a DOM element.
Warning: React does not recognize the closePopup prop on a DOM
element.
<PopupContent>
<div>Content Of The Popup </div>
</PopupContent>
I could use techniques explained here to distinguish between a DOM element and a React component. But I wanted to check with the community if there is a better way
what does this.props.children contain?
Shouldn't you be iterating over it?
render() {
return React
.Children
// this is the jsx version of cloneElenemnt,
// better to use in a render function
.map(Child => <Child.type ...Child.props ...this.props>)
}
Clone Element
React.Children.map
The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
You should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.
Also you can try {...this.props} format to pass your data instead of using cloneElement(element, this.props)
I've ended up checking the type of the child and conditionally removing the prop closePopup
Following condition will be true if the child is a HTML DOM element.
typeof this.props.children.type === 'string
Related
I have two components, a parent and a child.
Parent Component
const Parent = () => {
return (
<>
<div className="container"></div>
<div>more content</div>
<Child/>
</>
)
}
Child Component
const Child = () => {
const importantFunctionMustBeInChild = () => {
//Does a bunch of stuff that can't be done in the parent due to a lot of state that doesn't make sense to have in the parent
}
return (
<>
<button onClick={importantFunctionMustBeInChild}>Important Button</button>
</>
)
}
The problem is that I have a button in the child component. This button renders conditionally based off many different state toggles and has functions that can't be in the parent component because it wouldn't make sense to put it there and would take a long time to move all the state and functions up.
The issue is I now need to have the button to where the container div is in the parent component. Is there any way this can be done?
Going by the logic, you can assign a value(string, object, array) to parent component's state in the child component, right? So why can you not assign a function to the state and run it on click in the parent?
Definetely you can! In your child, assign function as a reference to the parent's state and thats it!
useEffect(() => {
// assign, don't invoke the function yet!
setFunctionToExecute(() => importantFunctionMustBeInChild);
}, []);
Here's a complete working demo
I have components 'Parent' and 'Child'.From Parent we can add or remove child. so children are dynamic. in Parent I have rendered Child component in loop like below
Parent.component.html
<child *ngFor="let child of children" [data]="child"></child>
Now in child component I have added a function called IsValid() to check child is valid or not
Child.component.ts
IsValid()
{
//check validity of component and return true if valid else false
}
in parent component I have a button called 'Save' I have to enable that button if all child's are valid else need to disable that button.
So I need a way to call Child components IsValid function for each child component from Parent and then determine the validity result and apply it to Save button to enable or disable
What I have tried
1.
I have emited valid or invalid result from child to parent and if any childs result is invalid i have disabled save button.
but problem here is : if I have added one child, make it valid, save button will be enabled. now I have added another child which is invalid so save button will be disabled but if I remove invalid child save button will be disabled though we have only one child which is valid.. since IsValid event get emmited only if current child get change.
2.
I can use something like this
<child #varName></child>
#ViewChild('varName') childElement;
and then from parent I can call
childElement.IsValid()
but since I have rendered childrens in loop how to give unique name in loop and how to add reference to that unique HTML tag in ts file.
I have created case here SlackBlitz
Any help will be appreciated. Thanks
You might want to use #ViewChildren
In your parent component:
#ViewChildren(ChildComponent) children: QueryList<ChildComponent>;
areChildrenValid(): boolean {
const invalid = this.children.some(c => !c.IsValid());
return !invalid;
}
Note that children will be defined after AfterViewInit hook.
#angular/core provides ViewChildren and QueryList, probably that should help you.
<child #varName></child>
import { ViewChildren, QueryList } from '#angular/core';
#ViewChildren("varName") customComponentChildren: QueryList<YourComponent>;
this.customComponentChildren.forEach((child) => { let retult = child.IsValid(); })
You could use Component selector:
#ViewChildren(ChildComponent) childrenList: QueryList<ChildComponent>;
and run a loop through it and determine the validity.
I would like to know if there is a way to only render a parent component when its child is rendered and vis versa. If you google the title you find quite a few entries but nothing the would work for my case because my elements aren't undefined or null, for example. Imagine a Parent:
class Parent extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<div className="container">
{this.props.children}
</div>
</div>
);
}
}
The following child might be depended on some settings. For instance, only show if a boolean is true.
class Child extends React.Component {
constructor(props){
super(props);
const showChild = Settings.get(...);
this.state = {
visible:showChild
}
}
render() {
const showHello = this.state.visible ? <div>Hello</div> : "";
return (
<div>{showHello}</div>
);
}
}
In my layout I scaffold it like this:
class Layout extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<Parent>
<Child />
</Parent>
);
}
}
Is it possible to unmount Parent if that Child element is not rendered? Thank you.
Update: A use case is if I want this Parent and Child to be in a Layout and Parent has a container class with a larger padding or margin because it is still in the component tree. If Child isn't rendered a large gap remains within the Layout and it just looks odd.
React was not designed with this workflow in mind, in fact the opposite: data is explicitly passed down the DOM tree, while actions are passed upward. By extension, React must render your Parent before your Child.
I'd suggest refactoring your Parent and Child to the point where Parent is aware of which settings its Child needs; insofar as your Child component is engaged with:
<Child settings={settings} />
To reiterate, this is also a more natural approach to React, whereby data is explicitly passed downward, and not implicitly loaded in the Child (although there's always exceptions, like the ability of connect() components with react-redux). But a benefit to this approach is that now Parent is able to determine whether or not to render its Child.
But what about the rendering of Parent? Don't we want to inhibit that too? If you do, then you'll need your Layout component to be aware of what it's Parent component needs, therefore:
<Parent settings={settings} />
This is a common approach to React since rendering down the DOM hierarchy is a must.
You could conditionally render in your Parent component by checking to see if it has any children.
Use this.props.children.length to see if there are any, if yes, render normally, if not return an empty element.
I have the following Vue.js components, which basically are supposed to have a radiobutton-like behaviour:
// Parent Component
<template>
<child-component
v-for="element in elements"
</child-component>
</template>
<script>
import ChildComponent from './Child.vue'
export default {
components: {
ChildComponent
},
props: {
elements: Array
},
methods: {
activate(e) {
for (let i of this.$children) {
i.active = false;
}
if (e < this.$children.length) {
this.$children[e].active = true;
}
}
}
}
</script>
and
// Child Component
<template>
{{active}}
</template>
<script>
export default {
props: {
active: Boolean
}
}
</script>
This works fine but only the parent can decide to activate one of the children (and thus deactivate all others).
I want however also be able to allow each child to activate itself (and by a magic property of its parent, deactivate all other siblings).
Obviously I do not want each child to know about its siblings and mess with their .active prop (super bad design).
I would rather not have a children communicate back up to the parent and call some method (still bad design as I could only reuse the child components in parents that have activate() method).
Instead I would like the parent to listen to changes to all children active props and take action when one of them changes. That way the parent entirely encapsulates the radio button behavior.
How can this interaction be implemented in Vue.js?
Take a look at two-way binding: http://vuejs.org/guide/components.html#Prop_Binding_Types
This allows you to sync a property's value in both directions, meaning the parent or the child has access to change the variable. Then you can watch for changes on the parent and update accordingly.
I think a better option would be to create a RadioSet component, which then would house a number of radio buttons. This would eliminate your concern about a parent having to have the activate() method. You could simply pass in an object with a series of id and values that could be used to generate the buttons.
I have a React component called <SensorList /> that has many child <SensorItem />s (another React component). I want to be able to declare an onClick event on each <SensorItem /> from within <SensorList />. I have tried doing the following:
sensorSelected: function(sensor) {
console.log('Clicked!');
},
render: function() {
var nodes = this.state.sensors.map(function(sensor) {
return (
<SensorItem onClick={ this.sensorSelected } />
);
}.bind(this));
return (
<div className="sensor-list">
{ nodes }
</div>
);
}
Needless to say, I do not get any "Clicked!" coming up in my console. The React inspector in Chrome indicates that an onClick event is registered, with the above function body as it should be.
I conclude, therefore, that I can't register onClick events on the actual <SensorItem /> tags (I'm not sure why this is, however). How do I go about achieving this otherwise?
This depends on your SensorItem component's definition.
Because SensorItem isn't a native DOM element but, like you said, another React component, onClick as defined here is simply a property of that component. What you need to do is, inside of the SensorItem component pass the onClick prop to an DOM component's onClick event:
var SensorItem = React.createClass({
render: function() {
return (
<div className="SensorItem" onClick={this.props.onClick}>
...
</div>
);
}
});
Problem
The problem, as being explained in another answer, is that onClick on a <SensorItem> React component (contrary to native DOM element like <div> or <p>) is treated as passing of component property, and not of a DOM event handler. And as most likely your <SensorItem> component doesn't declare onClick property, that property value simply gets lost.
Solution
The most straightforward solution is to add onClick property explicitly on SensorItem component, then pass it to the root DOM element of that component:
function SensorItem({ prop1, prop2, onClick }) {
(...)
return (
<p onClick={onClick}>
(...)
</p>
);
}
But the solution that usually works best for me is to group all the undefined component's properties using object destructuring notation, then pass them all to the root DOM element within that component. This way you can pass onClick, onHover, className etc. without needing to define separate properties for each one of them:
function SensorItem({ prop1, prop2, ...rootDOMAttributes }) {
(...)
return (
<p {...rootDOMAttributes}>
(...)
</p>
);
}
No matter which of the two approaches you use, the handler will now work, as it'll now be attached to the root DOM element of SensorItem:
<SensorItem onClick={...} />