I have an issue with typescript in the following simple component.
This works as expected:
import React from "react";
export default function App() {
const simpleComp = (shouldSayA: boolean) => {
return shouldSayA ? <p>a</p> : <p>b</p>;
};
return <div>{simpleComp(true)}</div>;
}
However, when I convert the simpleComp function to JSX function component SimpleComp like so:
import React from "react";
export default function App() {
const SimpleComp = (shouldSayA: boolean) => {
return shouldSayA ? <p>a</p> : <p>b</p>;
};
return <div><SimpleComp shouldSayA={true} /></div>;
}
I get the following error:
const SimpleComp: (shouldSayA: boolean) => JSX.Element
Type '{ shouldSayA: boolean; }' is not assignable to type 'IntrinsicAttributes & boolean'.
Type '{ shouldSayA: boolean; }' is not assignable to type 'true'.ts(2322)
I can fix the TS error doing something like this:
import React from "react";
export default function App() {
const SimpleComp = ({shouldSayA}: { shouldSayA: boolean }) => {
return shouldSayA ? <p>a</p> : <p>b</p>;
};
return (
<div>
<SimpleComp shouldSayA={true} />
</div>
);
}
but I'm sure there's some easier way that I'm missing. Why does TS throws an error in the second example?
The first argument passed to a component is the object containing all of the props.
If you pass one prop then it will be an object containing a single key:value pair.
That's just how components work. There is no simpler way.
That said, it is usually better to:
import React from "react";
const App = () => {
return (
<div>
<SimpleComp shouldSayA={true} />
</div>
);
};
type SimpleCompProps = {
shouldSayA: boolean;
};
const SimpleComp = ({ shouldSayA }: SimpleCompProps) => {
return shouldSayA ? <p>a</p> : <p>b</p>;
};
export default App;