I am trying to have a clickable grid of images within Gatsby using the Material-UI GridList
Inside the GridListTile I am not able to put a Gatsby Link around my image or inside the GridListTileBar.
export default function SingleLineGridList() {
const classes = useStyles();
return (
<div className={classes.root}>
<GridList className={classes.gridList} cols={1.5} cellHeight="300">
{tileData.map(tile => (
<GridListTile key={tile.img} className={classes.gridListTile}>
<Link to={`product/1`}>
<img src={tile.img} alt={tile.title} />
</Link>
<GridListTileBar
title={tile.title}
classes={{
root: classes.titleBar,
title: classes.title,
}}
/>
</GridListTile>
))}
</GridList>
</div>
);
}
I get the error 'TypeError: Cannot read property 'muiName' of undefined'
I have found similar examples from straight react so presume it is something to do with the Gatsby link component
I realise it is likely to have something to do with component wrapping but have no idea how to implement this.
How can I make the Gatsby Link element an accepted element with the GridListTile?
Related
How do I link a graph using a state to a form, so when the form changes the graph is automatically updated as well, even the form is not submitted yet? The graph is just using showCarrot to generate a chart.js element.
I found initialValues as fields for forms but do not know how to clue this all together. Anyone can help to save me from insanity?
Update: I figured that Ant Design form is based on field-form, still not know how this helps but it is a trail.
That's the state I set and propagate to my form and my graph
const [showCarrot, setCarrot] = useState<ICarrotArray>([]);
That's my form and table to edit the data
<Form form={form} initialValues={showCarrot} onFinish={onFinish}>
<Table
dataSource={showCarrot}
rowKey={"id"}
pagination={false}
bordered
footer={(): React.ReactElement => {
return (
<Button onClick={addCarrot}>
<PlusOutlined /> Add Carrot
</Button>
);
}}
>
...
</Table>
<br />
<Row justify="end">
<Form.Item>
<Button type="default" onClick={onReset}>
Restore
</Button>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{ marginLeft: 8 }}>
Save
</Button>
</Form.Item>
</Row>
</Form>
Firstly I just want to understand, correct me if I'm wrong.
You set your initialValues for form which is showCarrot. Is it mean that initialValues set for some Form.Item, because usually object element inside initialValue is used as data for Form.Item by their name.
Like so
<Form
name="validate_other"
{...formItemLayout}
onFinish={onFinish}
initialValues={{
['input-number']: 3, //name of the Form.Item
['checkbox-group']: ['A', 'B'],
rate: 3.5,
}}
>
<Form.Item label="InputNumber">
<Form.Item name="input-number" noStyle>
<InputNumber min={1} max={10} />
</Form.Item>
<span className="ant-form-text"> machines</span>
</Form.Item>
But by your code it look you want set showCarrot only as table data. If so, I can't find columns in your table, look like currently error because of that. You should add there dataIndex param which will listen for your data elements by that name
I am new to react-leaflet.
I'm working on a Flask React project and I'm trying to load a react-leaflet map.
I'm getting the below error :
Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined
at react-leaflet.js:7
at React__default (react-leaflet.js:4)
at react-leaflet.js:5
Versions :
react-leaflet : v1.9.1
leaflet.css : v1.3.1
react-leaflet.js : v1.9.1
I have added the necessary routes for rendering the Appbody.
But I'm unable to figure out what is wrong.
import React, {Component} from 'react'
import {Map, Marker, Popup, TileLayer} from 'react-leaflet'
const position = [51.505, -0.09]
class MainMap extends Component {
render() {
return (
<div>
<Map center={position} zoom={13}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution="© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
/>
<Marker position={position}>
<Popup>
<span>A pretty CSS3 popup.<br/>Easily customizable.</span>
</Popup>
</Marker>
</Map>
</div>
);
}
}
export default MainMap;
import React, {Component} from 'react';
import MainMap from "./map";
class AppBody extends Component {
render() {
return (
<div>
<MainMap/>
</div>
);
}
}
export default AppBody;
.leaflet-container {
position: absolute;
height: 100%;
width: 100%;
}
I'm currently using react-leaflet and I never had this kind of error, but I can see something wrong in the code (I don't know if those resolve the problem).
Firstly have you imported the leaflet.css file? You need to import this in the index.js or in the current file
import "leaflet/dist/leaflet.css";
You have also to add a ref props in the map component like this
<Map ref = "map" {...otherprops} >
I think the only problem in your code is surrounding the Map element by div tags.
So if you remove them and make the Map element at the top, then the problem should be solved.
TL;DR
Do not include the react-leaflet CDN in your index.html if you have installed it with npm or yarn.
Well, after much probing around with the problem myself I think you may have set up things incorrectly in the <head> of your index.html, this is how I had it set up before with the error happening:
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-leaflet/2.0.0/react-leaflet.js"></script>
and solving the issue:
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
Notice the difference? If you have installed react-leaflet with npm or yarn, you'll see that you don't need to add the leaflet script in your <head>. What was happening before is that the react-leaflet script was loading before the webpacked js files and it therefore could not find React. The react-leaflet source code that threw the error looked like this:
var React__default = 'default' in React ? React['default'] : React;
And obviously, if there was no React object in the first place, there will be an error when trying to find the 'default' key.
Hope this helps someone some day!
I am learning MeteorJS, React and React-Router and I am having difficulty passing a parameter in the URL through the router. I have searched for the answer and I cannot find what I am doing wrong:
In my Routes.jsx file ('lists' is my MongoDB collection):
render: function() {
return (
<Router history={browserHistory}>
<Route path='/' component={Navbar}>
<Route path='/home' component={Home} />
<Route path='/register' component={Register} />
<Route path='/login' component={Login} />
<Route path='/listpages/:listId' component={ListPages} />
</Route>
</Router>
);
}
and in my MyLists.jsx file (inside the component):
renderLists() {
return this.data.lists.map((myList) => {
return
<li key={myList._id}>
<Link to='listpages' params={{ listId: myList._id}}>
{myList.name}
</Link>
</li>;
});
},
render() {
return (
<div>
<h2>Lists</h2>
<AddList />
<ul>
{this.renderLists()}
</ul>
</div>
);
}
When I click on one of the links for ListPages, I get the console error:
Warning: Location "listpages" did not match any routes
Also, the correct listId is embedded in the line item, but not the URL:
<li>
<Link to="listpages" params={listId: "qksabGvfeuf5PdaJv"} onlyActiveOnIndex=false...>
<a params={listId: "qksabGvfeuf5PdaJv" className="" style={}...>Inbox</a>
</Link>
</li>
But if I remove the parameter to this:
<Route path='/listpages' component={ListPages} />
then it works as expected and the contents of ListPages is displayed (right now it's only a heading to see if I get there). So ListPages does exists, but not when I pass the parameter. What am I doing wrong?
Thank you in advance for any help you can provide!
For anyone that may have stumbled upon this page doing a Google search:
This question may have been asked prior to the current version of React Router, but the correct way to do links with path='/route/:id' is to do <Link to={'/route/' + id} where the id is the thing you want to display. Since you're missing the key id part, you're getting an error.
For example, I want to show a table with a specific ID that I get as a prop.
Routes.jsx:
...
<Route path='/DisplayTable/:tableId' component={ Comp } />
...
Component I am going to display the table from (SelectTable.jsx):
...
<Link to={'/DisplayTable/' + this.props.tables[i]._id} />
...
You can pass your query parameter like this,
<Link to={{ pathname: 'listpages', query: { listId: myList._id } }}>
Thank you for the input. I made the change and the first time it loaded, I clicked the link and received the same error (Warning: Location "listpages" did not match any routes). When I refreshed to try it again, now the application crashes on startup with an unexpected token error on the line that you suggested.
Does anybody have any advice for fixing the problem of a modal appearing behind its backdrop?
So far, I have tried making sure I have all the necessary imports (including <paper-dialog-scrollable>).
I also tried a "hack-fix" (suggested by someone) involving setting z-index: auto in the css of paper-header-panel. Neither works.
It's worth noting that the <paper-dialog> tag works just fine. Until I add the modal attribute.
Any ideas?
Similar issues
Appearing around the internet are this issue report and this Stackoverflow question.
my-element.html
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
<dom-module id="example-element">
<template>
<!-- Dialog -->
<paper-dialog id="contactDialog" modal>
<h2>Login</h2>
<paper-dialog-scrollable>
<form id="contact-form" autofocus>
<paper-input autofocus id="name" label="Your Name"></paper-input>
<paper-input id="email" label="Email Address"></paper-input>
</form>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Accept</paper-button>
</div>
</paper-dialog>
<!-- Button -->
<paper-button id="login"
data-dialog="contactDialog"
on-tap="openDialog">Login</paper-button>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'example-element',
properties: {...},
openDialog: function(){
this.$.contactDialog.open();
}
});
})();
</script>
This is my solution:
openDialog: function(){
var body = document.querySelector('body');
Polymer.dom(body).appendChild(this.$.dialogId);
this.$.dialogId.open();
}
Special Note: This answer applies to those trying to implement a <paper-dialog modal> element inside a header element. Specifically, inside <paper-drawer-panel>.
Answer:
On this bug report rubenstolk provides a hack-fix as follows:
To implement #dhpollack's hack in a nice way, add this function to your custom element:
// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
if (e.target.withBackdrop) {
e.target.parentNode.insertBefore(e.target.backdropElement, e.target);
}
},
And add on-iron-overlay-opened="patchOverlay" to all your <paper-dialog>'s
I have tested it and verifies that it works. So for now, that solves it. Therefore, I suppose it is sufficient for now to wait until the bug is fixed.
It wasn't quite clear from the screenshot, but the problem is your modal dialog appears behind the <paper-drawer-panel>, yes?
If so, I believe the solution is the same here: just place the dialog or custom element containing the dialog outside of the <paper-drawer-panel>, e.g.:
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu selected="{{_selected}}">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
</paper-header-panel>
<paper-header-panel mode="standard" main>
<paper-toolbar>
<h1>[[_selected]]</h1>
</paper-toolbar>
<neon-animated-pages selected="{{_selected}}">
<paper-button raised on-tap="openDialog">Show Dialog</paper-button>
<div>Div</div>
</neon-animated-pages>
</paper-header-panel>
</paper-drawer-panel>
<example-element id="dialog"></example-element>
Here is a screenshot illustrating this:
I am using ng-include directive to include partial views in IBM websphere Portlet.The code snippet is below
1.Defining render URL
<portlet:defineObjects />
<portlet:renderURL var="resourceURL" windowState="MINIMIZED" portletMode="view">
<portlet:param name="jspPage" value="/partials/list.html" />
</portlet:renderURL>
2.Main.js
<script>
var myApp = angular.module("App", []);
myApp.controller("myCtrl", function ($scope )
{
$scope.page='<%=resourceURL%>';
});
</script>
3.Home.jsp
<div id="<portlet:namespace />main" data-ng-app="App" data-ng-controller="myCtrl" >
<div ng-include src="'page'"></div>
<div>
But the partials are not included. Can anyone suggest me how to fix this?Am i missing anything?
You would need to change your code to go to the portlet context path:
Replace:
<%=resourceURL%>
with
<%=renderResponse.encodeURL(renderRequest.getContextPath():%>
This will work:
<div ng-include="'<%= renderResponse.encodeURL(renderRequest.getContextPath() + "/scripts/mypage.tpl.html") %>'"></div>