I'm new to react. I'm trying to create the following structure for a component in react:
<Sidebar>
<Box>
<Title/>
<Item/>
<Item/>
</Box>
<Box>
<Title/>
<Switch/>
</Box>
</Sidebar>
I can include the Title component in the Box component and pass each title value through props. How do I include the Item component in just the first Box component and not the second?
Is the best way to pass the Item and Switch components into the Box components as props?
There are quite a few ways to do what you're asking and really it really depends on where you are going with your program.
Multiple Types of Box components (with different names)
Wrap all of you sub-components in a div, and pass that div to your Box's 'children' prop. (Slightly changes your hierarchy).
Example
<Box children={<div><Title/><Item/><Item/></div>}/>
<Box children={<div><Title/><Item/></div>}/>
Hierarchy
<Sidebar>
<Box>
<div>
<Title/>
<Item/>
<Item/>
</div>
</Box>
<Box>
<div>
<Title/>
<Switch/>
</div>
</Box>
</Sidebar>
More fancy, build your sub-components from an array or other JS object that you pass as a prop and have a function inside 'Box' that reads that array and builds your sub components.
Leverage the special children prop in order to render arbitrary children:
children is a default prop passed implicitly to every component
this children prop is automatically populated with any elements contained within the parent component
instead of using props.children you can destructure props and use ({ children(, ...otherProps) }) instead
In action:
Box.js
const Box = ({ children }) => (
<div className='box'>
{children}
</div>
)
Sidebar.js
const Sidebar = ({ children }) => (
<div className='sidebar'>
{children}
</div>
)
App.js
import React from 'react'
import Sidebar from './path/to/Sidebar'
import Box from './path/to/Box'
class App extends React.Component {
constructor() {
super()
// state or whatever
}
render() {
return (
<Sidebar>
<Box>
{/*
Anything you put in here (other components
included) will be automatically rendered
*/}
</Box>
<Box>
{/* Same here */}
</Box>
</Sidebar>
)
}
}
Related
I want to create a component which takes the children provided to it and displays them in a different component.
For example, let's say I have the following layout:
<Layout>
<PageContent />
<Sidebar />
</Layout>
...and within the PageContent, I want to use another component (e.g. <SidebarContent>), such that the children given to the SidebarContent component are rendered as children of the Sidebar.
Example PageContent:
import { useState, useEffect } from 'react'
const PageContent = () => (
<>
<p>Page Content</p>
<SidebarContent>Sidebar Content</SidebarContent>
</>
)
}
export default PageContent
What is considered best practice for achieving this?
I have a trouble with getting data from props in my Sidebar, I coded it like this using Navigation Drawer.
How can I access for example that text ("xd") from navigationOptions or how can i pass an object there
and read it correctly?
contentComponent: props => <SideBar {...props } />, navigationOptions: {
icon: 'xd'
},
Rest of the code
export default Sidebar = props => (
{..Something not important in that question}
<DrawerNavigatorItems {...props} style={{
}}/>
</View>
</ScrollView>
);
I'm not sure what exactly your use case is, but it might be easier to just pass icon directly to the SideBar component as a prop:
contentComponent: (props) => <SideBar {...props} icon="xd" />
Then you can retrieve the icon value passed to your SideBar component like this:
export default Sidebar = (props) => (
<ScrollView>
<Text>{props.icon}</Text>
</ScrollView>
);
I've used the Text component to give an example, but replace the Text component with the views you want.
I'm looking for a solution. I have a Sidebar component that needs to render a different component based on which button in the parent component is pressed. I'm unsure of the best way to approach this problem, or if its possible. Heres my React code:
Parent Component
The content prop on the Sidebar component needs to pass down different components based on which Button components are clicked (so the first Button would pass a component in the content prop, and the second would pass down a component etc).
return (
<Fragment>
<Sidebar
isOpen={this.state.menuOpen}
content={<Filters />}
/>
<PanelWrapper>
<IconContainer>
<Button />
<Button />
</IconContainer>
</PanelWrapper>
</Fragment>
)
Child Component
And here that content prop would be rendered:
class Sidebar extends Component {
render() {
return (
<Menu
customBurgerIcon={ false }
noOverlay
isOpen={this.props.isOpen}
>
{this.props.content}
</Menu>
)
}
}
Thank you
Rather than passing a component as props, I'd probably do it something like this
class Sidebar extends Component {
render() {
return (
<Menu
customBurgerIcon={ false }
noOverlay
isOpen={this.props.isOpen}
>
{switch(this.props.content) {
case("type1"): <mycomponent1 />
...
}}
</Menu>
)
}
}
I'm new to React and building out a design a ran into a problem.
I have a component called SideBar. I am using this component two times, one on each side of the page.
The problem is that I would like to add different components to each instance of the SideBar component. These would be lists of various items and etc. I assumed I could next component tags but the sidebar component doesn't output.
import React, { Component } from "react";
import SideBar from "./WorkspaceComponents/SideBar";
import ScrollerBox from "./WorkspaceComponents/SideBarComponents/ScrollerBox";
class Workspace extends Component {
render() {
return (
<main className="reely-workspace">
<SideBar position="SideBarLeft">
<ScrollerBox />
</SideBar>
<SideBar position="SideBarRight" />
</main>
);
}
}
export default Workspace;
Your sidebar component should receive a children prop and render it out.
Something like this:
class Sidebar extends Component {
render() {
const {children} = this.props;
return (
<div className="sidebar">
<h1>Sidebar</h1>
{children}
</div>
)
}
}
Check out this post on react docs to understand how to compose react components: https://reactjs.org/docs/composition-vs-inheritance.html
You can make your SideBar Component a wrapper component which wraps around the content given in it.
Making SideBar Component a Wrapper Component :
class Sidebar extends Component {
render() {
return (
<div className="sidebar">
// You can add any custom element here //
{this.props.children}
</div>
)
}
}
All your element passed inside the SideBar Component will now be rendered as a part of SideBar along with what it contains.
Way to consume the wrapper component:
<SideBar>
<Content1></Content1>
<Content2></Content2>
<Content3></Content3>
</SideBar>
Edited:
I am new to react, and so far couldn't find the answer to this question. I have a <Box /> component, which renders some HTML.
import React, { Component } from 'react'
class Box extends Component {
render() {
return (
<div className="box-wrapper">
<div className="different-image-for-different-copies">
</div>
<div className="box-name">
Golden Lion
</div>
</div>
)
}
}
export default Box
On one page, I have three copies of the same component. I want to be able to give unique background-image to the inner with the className different-image-for-different-copies in each of those three components without making a new component.
Component <Box /> is the child of a component <Wrapper />. What I want exactly is to be able to change the background of a certain <div> located in the child <Box /> component from the parent <Wrapper /> component. For example:
class Wrapper extends React.Component {
render() {
return (
<div>
<Box "some way to change the background of the inner div" />
</div>
)
}
}
What would be the best way to do this?
Pass you image as a props to your Box component. Then in your component, set its style like this:
<div style={{ backgroundImage: `url(${this.props.imageUrlFromProps})`}}>
</div>
That's a basic example but should help you get your image to show up.
Use a prop to pass to the component which background image it should use and set it on your component using inline style. If the set of images is limited, the rendering could instead pick a CSS class to apply.