Creating a simple component in a new file, Component.tsx being called from App.tsx with props passed to it:
App.tsx
//standard imports
import {Component} from "./Component"
// Some state example. Array of objects - most common.
const ArrayofObj = [
{
id: 1
name: "Lovelace",
age: 32,
cool: true
}]
export function default App(){
return (
<>
<Component mystuff={ArrayofObj}/>
</>
)}
Component.tsx
// Define type of props I get here.
// Any name that makes sense. Notice the [] at the end.
type propTypes = {
ArrayofObj: { id: number; name: string; age: number; cool: bool }[];
// Specify it's an array using [] at the end!
};
// Accept prop with propTypes we defined above
export default function Component({ mystuff }: propTypes) {
// Create the lil pieces to put together later
const mystuff_li = mystuff.map((item) => (
<li key={item.id}/>{item.name} is {item.age} years old.</li>
));
// Return the stuffs
return <ul>{friends_li}</ul>;
}
Some other common ones...
Callbacks with mouse events can be found by hovering over your own function.
For example, a button with onClick={handleCancel} received from parent, the prop type in this case will be:
handleCancel: React.MouseEventHandler<HTMLButtonElement>;
Top comments (0)