Issue
I'm having trouble getting the syntax right for the Typescript React Props. I have an array of people each of which may have 0 - many cars. I have a people container that will contain all people, each person will have a car container that may contain cars, and car components that will be inside the car container.
I need to have the container for cars anyways because I will add edit buttons which will add cars to the person.
I'll add my code from top down:
PersonSlice:
export interface PersonState {
id?: number;
firstname?: string;
lastname?: string;
email?: string;
created_at?: any;
updated_at?: any;
cars?: [];
}
People.tsx:
function People() {
const people = useAppSelector(selectPerson); //person is of type interface PersonState[]
let contents;
contents = <><div className="personcontainer">
{people && people.length > 0 && people.map(person => {
return <div key={person.id}>
<Person
dispatch={dispatch}
person={person}
toggleEditForm={() => toggleEditForm(person.id)}
personToEdit={personToEdit}
submitEdit={submitEdit}
/>
</div>
})}
</div></>
});
}
This is where I start to have problems -
Person.tsx:
interface PersonProps {
dispatch: Dispatch<any>;
person: PersonState;
toggleEditForm: () => void;
submitEdit: any;
personToEdit: number;
}
function Person(props: PersonProps) {
return (
<div className="person">
<Cars cars={props.person.cars}/> //cars error: type [] | undefined not assignable to car[]
</div>
);
}
cars.tsx:
import {car, Car} from './car';
interface cars {
cars: car[];
}
function Cars (props: cars) {
return (
<div className="carcontainer">
<h2>cars container</h2>
{props.cars && props.cars.map((carobj: car) => {
<Car car={carobj} key={}/> //car error: Type '{ car: car; key: any; }' is not assignable to type 'IntrinsicAttributes & car'.
})}
</div>
)
}
export default Cars;
and finally car.tsx:
export interface car {
year: number,
make:string,
model: string,
price: number,
person_id: number,
}
export function Car (props: car) {
return (
<div className="carcontainer">
<h3>
{props.year} {props.make} {props.model} {props.price}
</h3>
</div>
)
}
So I have two errors, one in person.tsx and one in cars.tsx which I added as comments in the code.
I've read like a dozen questions on this but I'm still super confused. What am I doing wrong?
Thanks
Solution
The fix to both issues is in cars.tsx
.
import {car, Car} from './car';
interface cars {
cars?: car[]; // make this optional since the data from PeopleState is optional
}
function Cars (props: cars) {
return (
<div className="carcontainer">
<h2>cars container</h2>
{props.cars && props.cars.map((carobj: car) => {
<Car {...carobj} key={}/> // spread carobj into the component
})}
</div>
)
}
export default Cars;
Answered By - Mark Skelton
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.