I was trying to change URL path by clicking the <Tab/> component, I searched it through the Material-UI Tab API but couldn't find anything. Then I came across with the solution as
<Tab label='Most popular ideas' to='/myPath' component={Link} />
The question is how can you use component property even if it's not one of the <Tab/>'s props and how it's working?
Take a look at the documentation:
Any other properties supplied will be provided to the root element
(ButtonBase).
Here's the API props for ButtonBase:
https://v4-0-2.material-ui.com/api/button-base/
Props you'll provide to the Tab element which not being used by the element will bubble down to the next component, which is in this case ButtonBase that uses your component prop.
Related
Code example: https://codesandbox.io/s/jovial-paper-s0c69?file=/src/App.js
Material UI makes smooth collapse.
But, when I put JSX to external component, smooth brakes.
I made code example with smooth collapse and without smooth collapse.
How can I keep Lists in external component and keep smooth collapse?
But, when I put JSX to external component
Your example does not actually use an external component, you define Lists inside of NestedList and that function is consequently recreated on every render.
The desired behavior can be achieved by actually having a separate Lists component that receives the required props from its parent:
<Lists open={open} handleClick={handleClick} />
So I have a component that returns a button with some custom text and an icon. I'm pulling the icons from expo vector icons and so to use the icons I need to write something like:
<Icon_Name name"name"......>
I want to wrap my custom component around an icon or any other component, so then I can use various different icons within that component.
So I want my code to basically be:
<Custom_Component>
<IconOrSomeOtherComponent />
</Custom_Component>
I want to somehow call that icon component within my custom component. Is this possible?
I know that I can pass in variables into a custom component like:
<Custom_Component someVariable="some variable" />
and then use "someVariable" within my the function of the component, but I was hoping to find a solution where I can just wrap a component and call the "wrapped" component inside the function of my "Custom_Component".
I'm using functional components by the way, not class components.
I've been using for a while and I've never understood the purpose of the component prop. I've read the documentation and it still doesn't make sense to me. I've also read this interpretation of the component prop of the typography component but that also doesn't make sense to me. Can anyone ELI5 what this prop does?
In my understanding its purpose is standardizing type(text/font) styles and sizes (font size), on the other hand it accepts a component prop, which is used as the actual element to render the "text" in. It could be a DOM element or a component. Also there is a variant prop which determines the the style (including but not only the text size) of the "text", so the component is independent of the variant, so is the styling.
The Typography component uses the variantMapping property to associate a UI variant with a semantic element. It’s important to realize that the style of a typography is independent from the semantic underlying element. ~ Typography
<Typography variant="h1" component="h2">
h1. Heading
</Typography>
so the above snippet will render a <h2/> element with <h1/> element styling.
there is also a way to change variant to DOM element mapping. Changing the semantic element
I'm pretty new to ReactJS, but I'm slowly getting behind it.
I want to create a smart component, it should detect if it is "inside" another component and render differently then.
Example:
<Menu>
<Item />
</Menu>
Here, the item component should render as an anchor.
If used inside any other component or a div, it should simply render as a div as well.
Is there an easy way to check, if a component is inside another component in React?
You could solve this by passing a prop, saying something about the context the component is being used in.
The simplest solution in your case would be to, whenever you use the item component in menu, you pass a prop.
render(){
<Menu>
<Item insideMenu={true} />
</Menu>
}
Then inside the render you have two different return statements (depending on the insideMenu-prop).
// Item.jsx
render() {
if(this.props.insideMenu)
return (whatever)
return (whateverElse)
}
Normally I wouldn't reccomend this though. Components, in my opinion, should be reuseable and generic if possible. In this case, I'd argue it would be better to have two components: Item and MenuItem. So then it would be
<Menu>
<MenuItem>
</Menu>
<AnythingElse>
<Item>
</AnythingElse>
Inside MenuItem, you may very well use the Item component as well, if they share the same behaviour. So in that case, MenuItem would render Item, as well as the extra behaviour required for the menu. Or simply wrap it inside an anchor-tag, if that's all there is to it.
Either solution works, but the latter is (in my opinion) cleaner. Less surprises, easier to read, and less that can go wrong (no need to juggle props).
Is it possible to have this markup in the html:
<tabs>
<tab title="a title" tab-content="content">
<tab title="a title" tab-content="content">
</tabs>
and have react take that structure and create tabs functionality from it? i.e. create a list from the tab titles and divs for the content which get switched on/off depending on which tab is active.
I've come a background in Angular so may be thinking too angular-centric.
There are a variety of ways to go about creating tabbed content in React. What I believe you're asking though - specifying the content in the html - seems counter to the "react way" of doing things. From the React docs:
Remember: React is all about one-way data flow down the component
hierarchy. It may not be immediately clear which component should own
what state. This is often the most challenging part for newcomers to
understand...
The data for a given component is passed to the DOM rather than derived from it. So I wouldn't expect a React navigation component to get its functionality from existing html content but from the props passed in from the parent component or state that it manages itself.
While you could build this yourself, you may want to look at react-router which will provide some mechanisms for client-side routing and managing tabbed content.