score:0
update
import react from "react";
export interface myprops {
some: string;
another: number;
onemore: string;
}
const mycom:react.fc<myprops> = props =>{
...
};
now you have all them props and it includes children prop and default props as well
import * as react from "react";
export interface myprops {
some: string;
another: number;
onemore: string;
}
export function mycomponent (props: myprops): react.reactelement<myprops> {
const { some, another, onemore } = props;
return (
<p>{some}</p>
)
}
score:0
seems to me like your issue is as follows. you have specified that your component accepts a string
as a prop, but you are passing it a function. you would need to updated the props interface to not expect a string, but rather a function which returns a string. it would look something like this.
interface props {
getstring: (value: any) => string;
}
now your component isn't expecting a string, but rather a function which matched the type you are passing in.
score:1
i suggest you use interface
like so because in this way you can handle your prop and you can pass it a function or a string :
interface props {
your_prop_name : (value? : any) => string | string
};
and use it in your component
const app : react.fc<props> = (props) => {
return (
<>
{typeof props.your_prop_name === "string" ? <div>{props.your_prop_name}</div> : <div>{props.your_prop_name()}</div>}
</>
);
};
export default app;
Source: stackoverflow.com
Related Query
- TypeScript: Did you mean to call this expression?
- TypeScript > Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
- React hook form v7 Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()
- Typescript + React Testing Library - 'SidebarItem' refers to a value, but is being used as a type here. Did you mean 'typeof SidebarItem'?ts(2749)
- Attempts to access this ref will fail. Did you mean to use React.forwardRef()
- Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
- Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
- In React I get the warning: Function component cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
- Warning: Unknown DOM property class. Did you mean className?
- Function components cannot have refs. Did you mean to use React.forwardRef()?
- I'm getting error using laravel and react "Invalid DOM property `for`. Did you mean `htmlFor`"
- React + TypeScript error: No overload matches this call
- React Typescript hook error - This expression is not callable
- This expression is not callable Type 'String' has no call signatures
- No overload matches this call in Cors TypeScript
- [Error: Can't find npm module 'react/package.json'. Did you forget to call 'Npm.depends' in package.js within the 'modules-runtime' package?]
- This expression is not callable. Type '{}' has no call signatures. TS2349
- Keep getting warning: Invalid DOM property `autocomplete`. Did you mean `autoComplete`?
- Materia-ui and typescript No overload matches this call
- This expression is not callable when destructuring an array of React hooks in TypeScript
- Is this a safe way to avoid "Did you accidentally call a React Hook after an early return?"
- Module '"domhandler"' has no exported member 'DomElement'. Did you mean to use 'import DomElement from "domhandler"' instead?
- Typescript Routing Error - No overload matches this call
- Cannot invoke an expression whose type lacks a call signature. Type 'typeof ""' has no compatible call signatures React TypeScript
- In JavaScript classes, you need to always call super? Confused about this statement
- Module not found, did you mean "*js"?
- Typescript + React - No overload matches this call
- Does "immutable props" mean you can't call methods of objects on props?
- react: This expression is not callable. Type 'never' has no call signatures
- TypeScript and styled-components: No overload matches this call
More Query from same tag
- Is it better practice to conditionally render in React or conditionally add a class to hide elements
- How to pass multiple videos button onclick event in react
- Getting an error trying to start React right after (There might be a problem with the project dependency tree....)
- How to get scroll position of component?
- TypeScript React.SFC has unassignable types?
- Yup validation, 2 regex on one string
- Image is not loading in server side rendering with react
- onClick handler to call Material UI dialog box, is not working properly
- Set cookie not appearing in Axios and Fetch
- opacity affects everything inside it
- actions not working inside componentDidMount
- Base type on object
- useEffect stuck in infinite loop with useContext
- Setting iframe height to scrollHeight in ReactJS
- React component table is being rendered multiple times or duplicated after updating state
- How to fix 'form' is assigned a value but never used in axios
- UNSAFE_componentWillReceiveProps not called when using React 16.3.2
- Unhandled Rejection (Error): GraphQL error: Not authenticated
- React: DefaultValue for React-select
- both through the create-react-app to make build for development?
- Need to know Routing concept in React
- How can we use d3-funnel with React? I tried implementing it but getting some errors
- Prevent navigation to certain pages/routes
- ESLint: 'Helmet' is not defined react/jsx-no-undef
- Over the air update with React Native
- useState hook on select not same when changing
- React custom hook: can't get an async function
- Changing a Component inside another Component/react-icons
- Filling redux state with key objects from API endpoint
- Test a form with Jest and React JS TestUtils