I've created a card component as a react component and I'm trying to link it to another page. Should I link it inside the card.js component or inside my index.js?
When users click on each card it should link to another page.
<div className="CardGroup">
<Card
title="JCDECAUX Festive Card"
text="Illustration"
image={require('../images/christmas-card-1.jpg')} />
<Card
title="Go Wild"
text="Motion Design"
image={require('../images/Go-wild-thumbnail.png')} />
<Card
title="Phase"
text="UI design"
image={require('../images/Phase-hackthon-image.png')} />
<Card
title="Shine"
text="UI design"
image={require('../images/shine-app.jpg')} />
</div>
In my opinion, you should handle it in card.js so please use it with props.
Related
I don't understand why, when I click on browser’s back button my page doesn't reload.
I have a catalog component inside /pages/index.js which is my home page, a dynamic route to navigate to the products /pages/books/[name].js
This is the Link I use to go to the products pages :
<div className="container-cat">
{products.map((_product) => (
<Card id="lien" key={_product.id} alt="book" className="catalogue">
<Link href='/books/[name]' as={`/books/${_product.name}`}>
<a>
<Card.Body>
<Card.Img variant="top" src={getStrapiMedia(_product.grid_pic.url)} width="200px" />
<Card.Title>{_product.name}<br />{_product.author}<br />{_product.price} €</Card.Title>
</Card.Body>
</a>
</Link>
</Card>
))
}
</div>
I don't know what else to put here ...
I change my routes, putting the catalog component as the index.js of the /pages/books/
I can't really explain why, but it works
I am trying to create a simple button on native script called 'login'. I have created a login component but when I test the code it says no known component for element Login.
<template>
<Page>
<TabView height="100%" />
<ActionBar title="Home" />
<ScrollView>
<StackLayout class="home-panel">
<!--Add your page content here-->
<Label textWrap="true" text="Play with NativeScript!"
class="h2 description-label" />
<Button text="Login" #tap="onLoginTap" />
<Login>
</StackLayout>
</ScrollView>
</TabView>
</Page>
</template>
<script>
import Login from "./login";
export default {
data() {
return {};
};
},
methods: {
onLoginTap: function() {
this.$navigateTo(Login);
});
</script>
You have various issues in your code
You can only navigate between Page, your login component was not wrapped by Page element
I'm not sure why you are using TabView, it's used only when you have tabbed application and there is a specific component hierarchy. Refer documentation for more details. I have removed it as it doesn't seem required for your Page
You are not suppose to embed Login as a tag in the same Page
Overall I would suggest you to go through the basics of docs to avoid such issues.
Updated Playground
In my React component called Grid.js I am using a childcomponent called Pagination. It looks like this:
<StyledBox wrap py={12} px={18}>
<Header />
{state.data}
<Wrapper column justify="center" align="center" p={12}>
<Pagination onChange={this.handleChange} totalPages={10} />
</Wrapper>
</StyledBox>
It is a grid with some pagination functionality. When the user selects a page on the Pagination a changeevent will fire and a stateprop of the Grid will be set called state.data. The issue is that the pagination starts jumping around randomly: looks like the state has changed on the component.
Do I have to move the Pagination out of the Grid component and make it not a childcomponent?
Is the Pagination Component jumping around randomly because previously there was a specific length of data. Then when the this.state.data changes, the length of data is different? So then, the Pagination had to adjust it's positioning. Without more information, it seems like a HTML and CSS issue.
Try to set position: fixed; bottom: 1rem on the Pagination component css and see if it still jumps.
Also, regarding React Components, <Content /> and <Pagination /> components seem to be conceptually sibling and not parent-child related. So I would structure the app something like this:
<ParentContainer>
<Header />
<Content data={this.state.data} />
<Pagination onChange={this.handleChange} totalPages={10} />
</ParentContainer>
I have a component comment.js
export default function Comment (props) {
return (
<div className="comment-wrapper">
<img src={props.userImage} />
<p className="comment">{props.commentTitle}</p>
</div>
);
}
So I just simply want to have that component in the parent component as
<Comment userImage="IMAGE_LINK" commentTitle="BLAH BLAH" />
Again, I am using the Create-React-App build system from facebook. With that being said I know I can hard code an image using the following
<img src={require(`./images/MY-IMAGE.png`)} />
The code above works perfectly fine for the test image I am trying to load. However, when needed dynamically for the component the issue gets a bit more complex.
Now with the comment.js component above, I cannot do
<img src={require("./images" + {props.userImage})} />
I have taken a look at one thread on this site as well as reading this blog post on the issue and can still not come to a conclusion.
How can I handle image assets being passed as props to a component, in this case?
you can use import
// parent component
import MenuImage from '/img/menu.png'
<Comment image={MenuImage} commentTitle="Title"} />
then on Comment component
export default props => (
<img src={props.image} alt='' />
)
I'm using React-Leaflet and (callemall)Material-UI in a project. I'm attempting to render the Material-UI Card component within the <Popup></Popup> component of React-Leaflet. I've tried pulling it into the Popup as a component but the popup doesn't let the component work as it should. Specifically, the card component has a button element that expands it but unfortunately, the popup won't let me click it. I'm sure there's some CSS-y thing that I need to override but my thought is that an easier option would be to just replace the popup component with my own component but I'm not sure how to go about doing so. Any insight is much appreciated :)
My code looks like this:
<Marker position={position}>
<Popup>
<MapPopup />
</Popup>
</Marker>
And the imported component looks like: (I've removed styles and unimportant details to make it simple to read)
<Card>
<CardHeader />
<CardMedia
expandable={true}
overlay={
<CardText expandable={true}>
<div>
<p>Text</p>
<Chip>text</Chip>
</div>
<div>
<p>Text</p>
<Chip>Text</Chip>
</div>
</CardText>
}>
<img src="cardMediaImageURL" />
</CardMedia>
</Card>
Long story short, React-Leaflet and Leaflet renders static html for the popup so it is not possible to render dynamic content within it. Rendering a material-ui component is possible, however it won't be interactive. You can accomplish this by wrapping your component with <MuiThemeProvider></MuiThemeProvider>. You just have to make sure that you have the content set to be the complete view and not with anything like an expander.
Solution is as follows:
<Popup>
<MuiThemeProvider muiTheme={getMuiTheme(yourThemeName)}>
<YourCustomComponent />
</MuiThemeProvider>
</Popup>