Binding element 'note' implicitly has an 'any' type-CodePudding

I am getting the error which I'm sure is due to typescript. This is an example that I am trying to get to work. I use js server to import a few notes. The error is a red line under the {note} in the NoteCard.tsx file. Can someone please help me understand how to using these properties.

here is my notecard.tsx

export default function NoteCard({ note }) {  return <div>{note.title}</div>;}

here is my notes.tsx

export default function Notes() {
const [notes, setNotes] = useState<any[]>([]);

useEffect(() => {
fetch("http://localhost:8000/notes")
  .then((res) => res.json())
  .then((data) => setNotes(data));
}, []);

return (
<Container>
  <Grid container>
    {notes.map((note) => (
      <Grid item key={note.id} xs={4} md={4} lg={4}>
        <NoteCard note={note} />
        {/* <Paper>{note.title}</Paper> */}
      </Grid>
    ))}
  </Grid>
</Container>
);
}

CodePudding user response：

Try adding a props interface to the NoteCard function

interface NoteCardProps {
  note: {
    title: string
  }
}

export default function NoteCard({ note }: NoteCardProps) {  return <div>{note.title}</div>;}

CodePudding user response：

The implicit wording is not a coincidence. You can simply type the function, and give it an explicit type.

export default function NoteCard({ note }: { note: any }) {  return <div>{note.title}</div>;}

This should fix the warning.