I'm having a problem with my React component. The nested children of my component ControlPanel
don't seem to be rendering. Here is my code:
class App extends Component { render() { return ( <div className="App"> <ControlPanel> <CustomerDisplay /> </ControlPanel> </div> ); } }
I have the following two lines at the top of this file:
import ControlPanel from './components/control_panel'; import CustomerDisplay from './components/customer_display';
And here is my ControlPanel
Component:
import React from 'react'; import CSSModules from 'react-css-modules'; import styles from './styles.scss'; const ControlPanel = () => { return ( <div className="control_panel" id="control_panel"> </div> ); } export default CSSModules(ControlPanel, styles);
I have tried:
CustomerDisplay
component in the ControlPanel
component (in the ControlPanel
's index.jsx file)I know that nesting component's is possible. I've seen it done. For some reason it just won't work for me.
React Nesting Components In React, we can nest components inside within one another. This helps in creating more complex User Interfaces. The components that are nested inside parent components are called child components. Import and Export keywords facilitate nesting of the components.
Forcing an update on a React class component In any user or system event, you can call the method this. forceUpdate() , which will cause render() to be called on the component, skipping shouldComponentUpdate() , and thus, forcing React to re-evaluate the Virtual DOM and DOM state.
Simply use forceUpdate method to force React to Re-Render the component.
React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.
To allow components to contain children and render them correctly, you have to use this.props.children
. This is passed to all components with children as a prop and contains the children of the component, as explained by the React documentation:
Containment
Some components don't know their children ahead of time. This is especially common for components like
Sidebar
orDialog
that represent generic "boxes".We recommend that such components use the special
children
prop to pass children elements directly into their output:function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div> ); }
This lets other components pass arbitrary children to them by nesting the JSX
function WelcomeDialog() { return ( <FancyBorder color="blue"> <h1 className="Dialog-title"> Welcome </h1> <p className="Dialog-message"> Thank you for visiting our spacecraft! </p> </FancyBorder> ); }
As described in the documentation, some components don't know their children ahead of time -- they may be generic wrappers or boxes of content that vary, which is what your ControlPanel
is. So, to render the children of your component, you must render the children from the children
prop explicitly in the parent's render
method. Thus, apply it like this to your code:
const ControlPanel = (props) => { return ( <div className="control_panel" id="control_panel"> {props.children} </div> ); }
Notice how props.children
is rendered (not this.props.children
because it is a function component).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With