score:1
Accepted answer
best way would be to use the react.fc
type. this will inject the children
variable. you can also set the default variables inside the function parameters.
import react from "react";
import { suspense } from "react";
import loading from "../loading/loading";
interface lazyloadcompprops {
height?: string;
width?: string;
}
const lazyload: react.fc<lazyloadcompprops> = ({children, height = "300px", width = "300px"}) => {
return (
<suspense fallback={<loading height={height} width={width} />}>
{children}
</suspense>
);
};
export default lazyload;
score:0
to solve this i add the required and optional parameters in 2 different interfaces and then extends to another interface the optional and required like this:
import react from "react";
import { suspense } from "react";
import loading from "../loading/loading";
interface lazyloadrequiredprops {
children : react.reactnode;
}
interface lazyloadoptionalprops {
height ?: string;
width ?: string;
}
interface lazyloadprops extends lazyloadrequiredprops, lazyloadoptionalprops {}
const defaultprops: lazyloadoptionalprops = {
height: "300px",
width: "300px",
}
const lazyload = (props: lazyloadprops) => {
const {children, height, width} = props;
return (
<suspense fallback={<loading height={height} width={width} />}>
{children}
</suspense>
);
};
lazyload.defaultprops = defaultprops;
export default lazyload;
i see this example from the following source: https://dev.to/fullstackchris/react-with-typescript-optional-props-with-default-values-33nc
Source: stackoverflow.com
Related Query
- How create React Typescript component with required and optional values but required value without default value?
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- How to test with jest and typescript with types a basic react function component
- How to create a generic arrow function with react and typescript
- How To Unit Test React Component With react-intl, react-router-dom v4 and TypeScript
- How to create a dynamic, custom React Table Component with action and status buttons
- How to use Facebook Javascript SDK to login and force re-authentication with React Web and Typescript inside of a component
- How to create multiple swiper instance in a react component and control one with the swipe of another?
- How can I create multiple instances of a React component (having an infinite animation) with different values for the :root variables
- Creating a React component library with Webpack and Typescript but WP keeps bundling React
- How to create a HOC component in react validated with typescript
- How to mock React component methods with jest and enzyme
- How to create forms with React and Rails?
- React - useRef with TypeScript and functional component
- How to use React with Typescript and SASS
- How to test a component with a nested container with React and Redux?
- How to create a generic React component with a typed context provider?
- How to use jest.spyOn with React function component using Typescript
- React Typescript how send props and use it in child component
- How to create a reusable react-hook-form component with TypeScript generics?
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- How to mock a React component lifecycle method with Jest and Enzyme?
- Connecting a component with OwnProps using react redux and typescript in the .NET Core 2.0 reactredux template project
- Create React App with TypeScript and NPM Link: Enums causing Module parse failed
- How To create a Global Component like Toast in React And Refer it in any other component?
- Why is my React component render called twice, once without data and then later with data, but too late exception?
- How to test if a React component contains another component with Tape and Enzyme?
- How to display object's keys and values in react component
- How to create a link in React component with onClick handler?
- how to change image src using props with styled component and react
More Query from same tag
- React Router: How to render different Components with different parameters
- How to avoid component rerendering when route change which similar to keep-alive in vuejs?
- Type 'MainMenu[]' is not assignable to type 'never[]'
- Cannot read property of undefined when using map to render components
- How to configure service workers with create-react-app
- User Authentication for API from React App
- React + typescript using CDN script
- How to mock external module method?
- How to test the child component render text after the button on the parent component click with react testing library?
- How to update the input field when other input field is edited using React useState
- NextJS dynamic routing with modal reload causing overlay background to disappear
- React doesn't propagate events to inner components
- call two functions within onchange event in react
- How to find a child component from the enzyme mounted, react-redux stateToProps connected parent?
- How to implement SSR for Material UI's media queries in NextJs?
- How we can get the facebook access token once the AWS Cognito authentication?
- npm build with Browserify - Error: Cannot find module
- How to make Relay and React Routing work properly?
- React Component updating itself
- Does React use server-side-rendering or client-side-rendering?
- ReactJS Accessing Props of Rendered Component
- Input props not working on pure function component?
- why aren't marker icons showing on the map of react mapbox?
- How to make svg fit container in React?
- Call component function from a JS File
- Display API data using Axios and a list in React
- Which is the better document structure?
- How to block routes with '/' on create-react-app
- How to calculate lattitude and longitude from x-y coordinates for geotagged images
- How to get index of nested row in antd?