There is a package called react-data-grid. And there is an example table on that particular package but the code is in TypeScript and also docs for this particular version are not there. I tried to convert the typescript to React. Everything was fine until I wanted to implement Drag and Drop. Some error is coming and I think that error is because I'm importing something in the wrong way. Can you tell me where I'm doing anything wrong?
Here is the Sandbox link.
The error in my local build is coming on RowRender.js in line number 44.
I also included the typescript file there.
You can also see the error if you just uncomment the line 72-74 of App.js component in sandbox.
Rename .ts file to .tsx file. In another case TypeScript will not understand <div> <Row> and other react elements
Update your imports regarding react-data-grid to: import { Row, RowRendererProps } from "react-data-grid";
Update your import import { useCombinedRefs } from ... to fetch hook from correct place.
If you will see error regarding default import for React - change import React from 'react' to import * as React from "react"; or update tsconfig to support synthetic imports
useCombinedRefs - is internal function that is not exported, so you can't use it directly. Option #1 - write it yourself. Option #2 find the reason why you are trying to use internal function. Should be the better way.
function useCombinedRefs(...refs) {
return useCallback(handle => {
for (const ref of refs) {
if (typeof ref === 'function') {
ref(handle);
} else if (ref !== null) {
ref.current = handle;
}
}
}, refs);
}
Related
I am using a Stepper component, and I would like to style the connectors individually based on their index. The need to be able to access the index of the current step from within StepConnector came up in this GitHub issue in February, and a PR was accepted to make this easy with useStepContext. I'm using the current version of MaterialUI, 5.10.4.
However, I'm getting an empty object back instead of the context I'm expecting with the index. This happens with both approaches. The only difference I can see between what I'm doing and the sample code from the GitHub issue is that I'm on 5.10.4 and the sample is using 5.4.0. But perhaps I'm missing something?
Here is my code. The easy way:
import { useStepContext } from "#mui/material/Step/StepContext";
import StepConnector from "#mui/material/StepConnector";
function CIConnector(props) {
const ctx = useStepContext();
console.log("context:", ctx);
return (
<StepConnector />
);
}
The hard way, suggested as a workaround in the original issue before the PR was accepted:
import * as React from "react";
import StepContext from "#mui/material/Step/StepContext";
import StepConnector from "#mui/material/StepConnector";
function CIConnector(props) {
const ctx = React.useContext(StepContext);
console.log("context:", ctx);
return (
<StepConnector />
);
}
In this second version, when I break in the debugger, StepContext is undefined. But if I step into useContext(), it seems to correctly receive the StepContext object. Still, it's returning an empty object.
What am I doing wrong?
I have gotten a minimal test to fail too, so I have opened a bug with MUI.
The problem was the way I was importing the method. This code works on MaterialUI 5.10.17:
import { StepConnector, useStepContext } from "#mui/material/Step";
function CIConnector(props) {
const ctx = useStepContext();
console.log("context:", ctx);
return (
<StepConnector />
);
}
I imported all necessary libs.
import "#microsoft/mgt";
import "#microsoft/teams-js"
put tag MgtTeamsChannelPicker into my render section
render() {
return (
<MgtTeamsChannelPicker></MgtTeamsChannelPicker>
);
}
than i got an error.
Due to how react handles custom elements, they must be referenced differently. Alternatively you can use our wrapper here:
https://github.com/nmetulev/mgt-react
which will allow you to reference the component in the following way:
import { TeamsChannelPicker } from 'mgt-react';
<TeamsChannelPicker></TeamsChannelPicker>
quick note: The names of the React components are in PascalCase and do not include the Mgt prefix
With create-react-app and JavaScript/TypeScript, I understand I'm able to "import" an SVG as noted below. How may I do so with ReasonML?
import { ReactComponent as Logo } from './logo.svg';
function App() {
return (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);
}
Create React App uses webpack to transform SVG files into React components. If you’re using Reason with CRA, then all you need to do is provide a binding to the generated component. However, CRA will only transform the SVG into a component if the import statement is written exactly a certain way, which isn't how BuckleScript outputs import statements. (There's a GitHub issue about it here.) You have to import it with raw JavaScript and then bind to the imported value:
%bs.raw
{|import {ReactComponent as _Logo} from "./logo.svg"|};
module Logo = {
[#react.component] [#bs.val] external make: unit => React.element = "_Logo";
};
/* And we can use it like a regular component: */
[#react.component]
let make = () =>
<div>
<Logo />
</div>;
According to the CRA docs:
The imported SVG React Component accepts a title prop along with other props that a svg element accepts.
For any of the other props you want to use, you'll have to add them to your external binding.
If you're not using CRA, then you'll need to configure your bundler to do the same transformation. I'm not familiar with the internals of CRA, but this seems to be the relevant code from its webpack configuration.
We can use SVGR to handle the webpack loading and then import the module as we normally would.
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
module: {
rules: [
//...
{
test: /\.svg$/,
use: ['#svgr/webpack'],
},
],
},
//...
};
module Logo = {
#bs.module(`../../../../src/img/logo.svg`) #react.component
external make: {.} => React.element = "default"
}
...
<Logo /> // works
source: https://blog.logrocket.com/how-to-use-svgs-in-react/
I am the author of another solution that doesn't involve webpack.
It's a tool that can transform your svg files directly into .re files: https://github.com/MoOx/react-from-svg
This can create files for react (dom) or react-native(-web) (=> files generated use react-native-svg).
Feel free to try it :)
For example you can do (when the tool is installed from npm)
$ react-from-svg src/SVGs src/SVGs/components --with-native-for-reason --remove-fill
This will turns the files from svg/SVGs into React components into src/SVGs/components compatible for React Native with the Reason syntax.
The last option remove all svg fill props so you can use them as icons.
Note that the generated components accept width, height & fill props so you can adjust them when used.
Last bonus: since webpack is not involved, you can use this transformation only when you update your SVGs files & use this code directly with a Node runtime (JSX from Reason gets removed when converted to JS so the code can be consumed directly via Node without any transformation - which can be handy for tiny static sites/pages).
in the use of library 'react-metismenu' there is not problem and work correctly,but this use anchor for selecting item of menu. that is not good.
so to use react-router-link i use 'react-metismenu-router-link' library
but this error accured:(
Cannot read property 'history' of undefined
this.context.router.history.listen(this.onLocationChange.bind(this));
how to fix this problem?
https://www.npmjs.com/package/react-metismenu-router-link
There's an open PR to fix this bug but the original repository has been archived so it won't be merged.
You can checkout jhillhouse92's fork of react-metismenu-router-link and install this package instead of the original one, it includes the code of the PR.
Edit: I'm adding more information as suggested.
This bug is caused by the use of Context API instead of props in RouterLink component, as you can see in the PR.
These are the bug causing lines in RouterLink.jsx :
this.context.router.history.listen(this.onLocationChange.bind(this));
this.onLocationChange(this.context.router.route);
jhillhouse92 commits are replacing context with props:
class RouterLink extends React.Component {
componentWillMount() {
this.to = this.props.to;
if (this.to[0] !== '/') this.to = `/${this.to}`;
// He is using props.history instead of context.router.history
// and props.location instead of context.router.route
this.props.history.listen(this.onLocationChange.bind(this));
this.onLocationChange(this.props.location);
}
onLocationChange(e) {
if ((e.pathname || '/') === this.to) {
this.props.activateMe();
}
}
We are also adding withRouter in the export of our RouterLink component to give him react-router-dom related props (e.g. props.history):
export default withRouter(RouterLink);
Applying these changes, either by installing the package from git or editing manually should solve your bug.
I'm using elements with custom tag names in React and getting a wall of these errors. There's a GitHub issue on the subject (https://github.com/hyperfuse/react-anime/issues/33) in which someone states:
This is a new warning message in React 16. Has nothing to do with anime/react-anime and this warning can safely be ignored.
It's nice that it can be safely ignored, but it's still not going to pass scrutiny when my code is filling the console with useless error messages.
How can I suppress these warnings?
I found a potential fix for this issue - if you are using a plugin (and potentially in other circumstances) you can use the is attribute.
Found here when working with X3d - simply writing <scene is="x3d" .../> works
Update:
see the answer from #triple with the correct solution:
https://stackoverflow.com/a/55537927/1483006
Orignal:
I'm not saying this a correct thing you should really do, but you could hook console.error and filter this message by putting this somewhere before react-anime is loaded:
const realError = console.error;
console.error = (...x) => {
// debugger;
if (x[0] === 'Warning: The tag <g> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.') {
return;
}
realError(...x);
};
It seemed to work on the sample that was posted in the GitHub issue you linked at least. :3
My solution was to create envelope component which renders <div> with desired classes:
import React, {Component, DetailedHTMLFactory, HTMLAttributes} from "react";
import classNames from "classnames";
export default class SimpleTagComponent extends Component<SimplePropTypes>{
baseClassName = 'simpleComponent'
render() {
return React.createElement(
'div',
{
...this.props,
className: classNames(this.baseClassName, this.props.className),
},
this.props.children
);
}
}
type SimplePropTypes = HTMLAttributes<HTMLDivElement>
export class MyTag extends SimpleTagComponent {
baseClassName = 'my'
}
I don't believe there's a built in way to suppress the error message.
The warning message is logged right here in react-dom. You could fork react-dom and simply remove the error message. For a change as small as this, perhaps using something like patch-package would be useful, so you don't have to maintain a fork.
React 16 gives warnings with x3dom components .
including is="x3d" in component suppresses these warnings.
I had the same error. My problem was the new file for js when I use sfc I first letter of the name (tagname) has to be capital letter. I am just new so, I didn't notice it. But I am writing this just in case
I wrapped my HTML in the <svg> tag.
https://github.com/facebook/react/issues/16135:
I think you're probably rendering them outside of <svg> tags.
This is what got rid of the Web Browser Warnings for me:
BAD:
const SocialMedia = (props) => {
<socialmedia>
return (
Good:
const SocialMedia = (props) => {
return (