Im not sure why im getting the error:
TypeScript error in /home/amanuel2/tutorial/go/react-go/src/frontend/src/App.tsx(34,15):
Type '{ props: string[]; }' is not assignable to type 'IntrinsicAttributes & string[]'.
Property 'props' does not exist on type 'IntrinsicAttributes & string[]'. TS2322
Code:
function App() {
const [ChatHistory, setChatHistory] = useState<string[]>([])
useEffect(() => {
connect((msg: string) => {
console.log("New Message")
setChatHistory([...ChatHistory, msg])
})
console.log(ChatHistory)
return () => { }
}, [])
return (
<div className="App">
<Header />
<header className="App-header">
<Chat props={ ChatHistory }/>
<button type="submit" onClick={()=>sendMsg("Hello")}>
Hello
</button>
</header>
</div>
);
}
And
const Chat = (props: string[]) => {
const msgs = props.map((msg:any, idx:any) => (
<p key={ idx }>
{ msg }
</p>
))
return (
<div className="ChatHistory">
<h3> Chat History </h3>
{ msgs }
</div>
)
}
Your line <Chat props={ ChatHistory }/>
passes the type { props: string[] }
as the first argument (the one called props
) into the Chat
component, but Chat
expects it to be string[]
(from const Chat = (props: string[]) => {
).
Instead, you can change the expected type of the props of Chat:
const Chat = (props: {props: string[]})
Now, this is not good style, since the name props
should only be used to specify all attributes in that object.
So, instead you can rename the ChatHistory
prop that is being passed to Chat:
render() {
// ...
<Chat chatHistory={ChatHistory}/>
}
// ...
const Chat = (props: {chatHistory: string[]}) {
props.chatHistory.map( // ...
}