Got the code from react-daisyUi.
return <Button {...args} />
When apply this code inside VS , then I got error for {...arg}.
How to use (...arg) in react daisyUi ?
Related
I'm getting this warning when using <NavHashLink /> from the react-router-hash-link NPM package, like this:
<NavHashLink to='#contact' className='btn btn-primary'>
Everything is working as intended but I would like to know what's causing this error and how to avoid it.
I have a related issue using 'NavHashLink' with react router v6 and i get rid of the problem by simply using 'HashLink' like this :
<HashLink to="/url/#anchor">
content
</HashLink>
hope it will help!
Here you can see my code in React.js
I want to have several modal windows in one React component. I tried to use Modal from “react-native”, but it didn’t work.
Now I’m trying to use my own realisation of modal window, you can see it here. I want to use this component for creating modal windows according to parameters.
Unfortunately, this component creates modal windows with default values (null). I have watched lots of tutorials, but I still don’t know how to fix it.
I will be very grateful for help.
I asume that you are passing some value to title.
You can add some ternary operators in the jsx structure:
<div className="modalTitle">{title ? title : "what ever value you want"}</div>
Or you can add/set loader:
return (
<>
{title ? (
<div>Your modal content here</div>
) : (
<div>Your loader here</div>
)}
</>
);
Please help me understand what is causing the error message below.
I'm trying to migrate a project to Snowpack, having used create-react-app previously. In this project I am using a library called react-konva for some canvas stuff. This library works fine when used in create-react-app, but when I try to use it with snowpack I get this error:
Uncaught SyntaxError: The requested module '../web_modules/react-konva.js' does not provide an export named 'Rect'
I error above was raised by this snippet:
import { Layer, Rect, Stage } from 'react-konva';
const ReactKonvaTest = () => {
return (
<>
<Stage width={800} height={500}>
<Layer>
<Rect width={200} height={100} strokeWidth={10} stroke="#222" />
</Layer>
</Stage>
</>
);
};
function App() {
return (
<div className="App">
<ReactKonvaTest />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
export default App;
The same snippet does not cause any problems when used in a project initialized with create-react-app.
I don't understand whats causing it. Im not sure what ../web_modules/ directory in the error message is referring to. I have not heard of it before, and my searches haven't yielded any relevant matches.
It is fixed with react-konva#17.0.1-1
I usually use react-to-print (https://www.npmjs.com/package/react-to-print) for printing React components with a low effort and great flexibility. I'm starting to write my applications with TypeScript, and this is the first time I need to combine these two things.
This is my code:
<ReactToPrint
trigger={() => <Button variant="contained" color="primary">Generar</Button>}
content={() => componentRef.current}
/>
<PrintableComponent ref={componentRef} />
To create the reference, I simply do:
const componentRef = useRef();
In JavaScript, it works, but when I use .tsx, I get an error in the "content" parameter of the ReactToPrint component and another in the ref parameter of my own PrintableComponent. Could someone help me with this?
Basically, the errors say that the interfaces do not match.
You can define the type for useRef to get rid of the ts error credit to shane935:
const componentRef = useRef<HTMLDivElement>(null)
And if you, like me, are using functional components you will get a problem trying to use that ref following react-to-print class based components. To bypass this error you can wrap your component you wish to print in a div:
<ReactToPrint
trigger={() => <Button variant="contained" color="primary">Generar</Button>}
content={() => componentRef.current}
/>
<div ref={componentRef}>
<PrintableComponent />
</div>
Everything inside this div will be printed.
Seems like a known issue when using hooks:
https://github.com/gregnb/react-to-print/issues/214
As an alternative, you can avoid the useRef hook and follow the example in the source repo which seems to work in TypeScript:
https://github.com/gregnb/react-to-print/blob/master/example/index.tsx
i.e., the first example on the npm readme doc:
https://www.npmjs.com/package/react-to-print#example
In my react component, I'm trying rendering with returning jsx code, but it's not working (syntax error) :
<button onClick={this.refresh} {isFetching && 'disabled'}>Refresh</button>
Following is working (but not what I want) :
<button onClick={this.refresh}>{isFetching && 'disabled'}Refresh</button>
Why this syntax error ? What can I do to display my Button as disabled ?
You'll just want to pass a boolean as the value for the disabled prop.
<button onClick={this.refresh} disabled={!!isFetching}>Refresh</button>