Property 'props' does not exist on type IntrinsicAttributes & string[]

Question

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>
  )
}

Answer 1

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(  // ...
}