score:3
Accepted answer
you can solve this with this.props.children
like this
class registrationcodeentry extends component {
render() {
return (
<registrationcontainer>
// render it as children
<registrationentryview someprop="blah" />
</registrationcontainer>
);
}
}
then in your container
class registrationcontainer extends component {
render() {
const maincontent = this.props.maincontent;
return (
<row>
<col offset="lg-3" lg={6}>
// render the passed children
{this.props.children}
</col>
</row>
);
}
}
score:2
your approach is correct. you just went wrong here:
<row>
<col offset="lg-3" lg={6}>
<maincontent />
</col>
</row>
instead do this:
<row>
<col offset="lg-3" lg={6}>
{ maincontent }
</col>
</row>
i personally think, this approach is better than using children.
when you did this - const registrationview = <registrationentryview someprop="blah" /> ;
the component was already rendered and converted to appropriate format. hence you cannot re-render it with <maincontent />
.
so using {} is correct in this case.
good luck!
Source: stackoverflow.com
Related Query
- React JS - Nesting components passed as props
- React prevent remounting components passed from props
- React functional components in Array.map are always rerendering when getting passed a function as props
- Getting warning from props passed in MUI styled components related to React not recognizing it
- How to sort react components based on props being passed into it
- React useState passed as props is not changing in child components
- React JS components rerendering despite callbacks when props are passed
- Nesting state in react to reduce amount of props being passed
- why we cannot pass boolean value as props in React , it always demands string to be passed in my code
- React - How to pass props to a component passed as prop
- How to add additional props to a React element passed in as a prop?
- React memo components and re-render when passing function as props
- How to mock functions, and test that they're called, when passed as props in react components?
- React: Are there respectable limits to number of props on react components
- React router - pass props on routes to child components
- HOC's and Render Props With Functional Components in React 16
- why react props are passed undefined to the child component?
- React class components - conditional styling based on props
- WebStorm highlights React component when props passed through react-redux connect function
- React Navigation losing props that are passed down
- React - Call props function inside of a components function
- React pass props down to all descendant Components
- React js: How to set props in JSX components which store in variable
- React Native: Passing props between components and componentWillMount() method
- Send multiple props across components React
- How do I define a TypeScript type for React props where prop B is only accepted if prop A is passed to a component?
- React and Typescript: Convention for classes when no props are being passed
- Do the constructors of React Components need the props argument?
- React - Passing fetched data from API as props to components
- Spreading Props TypeScript with React and Styled Components
More Query from same tag
- How can I call Rtk Query Hook when the condition changes?
- I want to make the background an image with react, but a white part is created
- React component is not being rendered
- How to do app versioning in create react app?
- Cypress can't find Material-UI's textarea
- What did I wrong in the code. I am getting late response from Axios
- scroll eventlistener is interupting the scrolling event it triggers
- Dynamically Created Elements in React - How to have control?
- React: Child Components Without JSX
- Can't call object method on previous state in setState hook inside subscribe body
- Signals error when i execute my npm package
- setState update array value using index in react
- How to display props in the html format in React function component?
- How would you do file uploads in a React-Relay app?
- waiting array of urls after uploading images to firebase storage and then stroing it again to firestore
- 3 conditional views in render
- Trying to understand the Redux action creators
- How to correct displaying value in chart?
- Setting Up ReactJS on .NET Core 2.0, InvalidOperationException
- How can I create Master Detail Page using React
- How to Redirect to the login page?
- why is form not submitting when using create-react-app?
- How to make reusable styled components that have some dynamic CSS attributes
- Is there a way to filter an array by values of another array
- Problem with Redux stored data in showing in table
- Cannot import react js component
- enable button to submit only when all the fields are filled
- How to update props immediately when updating states in react?
- React Material UI, Card Spacing Issue
- Which Life cycle method should be preferred when using redux?