score:8
Accepted answer
you were very very close, it should look something like:
const page1 = (props) => <div>my first page</div>;
const main = (props) => <div>{props.content}</div>;
class app extends react.component {
render () {
return (
<div>
header
<main content={<page1 />} />
footer
</div>
);
}
}
reactdom.render(<app/>,document.getelementbyid('root'));
http://codepen.io/cjke/pen/vpyjpk?editors=0010
as an alternative, and probably a bit more natural is to leverage children:
const page1 = (props) => <div>my first page</div>;
const main = (props) => <div>{props.children}</div>;
class app extends react.component {
render () {
return (
<div>
header
<main><page1 /></main>
footer
</div>
);
}
}
reactdom.render(<app/>,document.getelementbyid('root'));
Source: stackoverflow.com
Related Query
- Pass component tag as a props in react native
- Cannot Pass Props to another component in React Native
- Pass react component as props
- React - How to pass props to a component passed as prop
- React react-router-dom pass props to component
- How to pass props to component inside a React Navigation navigator?
- Pass style as props in react component
- React Native pass function to child component as prop
- Add style from props to existing component styles in React Native
- React - use ref in component AND pass it to parent in props
- Component not updating when I change the props that I pass to it in React
- React Redux pass state as props to component
- How do I pass a Prop to a Navigation Screen Component - React Native
- React router pass props to route component
- How to pass props to react component that wrapped in variable
- How to pass props of React component to styled component
- Pass two children as props to a React component
- Pass props to dynamically imported react component
- Pass props to a child component in React
- How to add new props dynamically to the component using navigator in React Native
- How to pass rest of props to react component while also having required props defined in an interface
- Pass props to componentDidMount() in React component
- Pass component props in Private Route with Typescript and React
- React TS Generic component to pass generic props to children
- React Pass Props to a Stateless Functional Component
- React - Pass function to component that has default props
- How to pass dynamic props to a React component that accepts a union of objects as its type?
- React TS - How to pass props from a parent component to a deeply nested child
- React HOC can't pass props to enhanced component
- How do i render multiple props in a single component and then pass those props to a child component in React
More Query from same tag
- Store state of text areas belonging to different tabs
- React Transfer internal prop of Parent to Child
- JavaScript Array Map returns empty array
- Mapped array assignment through ternary operator fails?
- FontAwesomeIcon "defined but never used" even though it is required
- ReactJS button loses its functionality when I resize the window
- React Hooks/Context & Elastictic UI. Problem with fetched data (REST) in function Component
- updating array in object properties using properties
- ReactJS Ajax File Upload
- Testing method in react component don't work
- React useState to change color not working
- How to get active link to work with dynamic sub paths in Next.js
- web pack css-loader generated css class names with react-bootstrap
- How to package to 'production' my react website with Webpack?
- Jest: Cannot read property then of undefined
- Handling view logic in redux
- AmCharts in NextJS - SyntaxError: Unexpected token 'export'
- Why is scrollbar not appearing in my react app when I load it on chrome?
- React Array in State updating late
- styled-components for input type password
- React accordion get collapsible height
- How to avoid escaping single quotes in JSX attribute
- mount() fails because target container is not dom element
- react higher order component
- How do I return the id property of the user object in Apollo?
- React child routes remounting on click
- Adding multiple items to shopping cart
- react-jsonschema-form custom element position
- req.body.something returns undefined
- I'm getting errors using braintree: ValidationErrorsCollection