React js Typescript string array variable

Question

I have the following two components. I think I'm having trouble properly declaring my array object to match the interface I've declared. Why do I get the following error on all my properties?

[0] (10,5): error TS2304: Cannot find name 'color'.
[0] (11,5): error TS2304: Cannot find name 'id'.

app.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

const cars = [
    { id: 1, make: "Make1",  year: 2016, color: "black" },
    { id: 2, make: "Make2",  year: 2006, color: "gray" },
    { id: 3, make: "Make3",  year: 2012, color: "purple" },
];

ReactDOM.render(<CarTool cars={cars} />, document.querySelector("main"));

Car Component

import * as React from "react";    
import * as ReactDOM from "react-dom";

interface CarProps {
    cars: string[];
}    

export class Car extends React.Component<CarProps, void> {
    public render() {
        return <div>
            <h1>Car Tool</h1>
            <table>
                <thead>
                    <tr>
                        <td>Make</td>
                        <td>Year</td>
                        <td>Color</td>
                    </tr>
                </thead>
                <tbody>
                    {this.props.cars.map((car) => <tr><td>car.make</td></tr>)}
                </tbody>
            </table>
        </div>;
    }
}

hendrixchord · Accepted Answer · 2017-08-04 04:22:40Z

28

It's because you've declared you props type as string[]

Declare the interface for your object

interface Car
{
    id: number, 
    make: string,
    year: number,
    color: string,
}

And then declare you props as

interface CarProps {
    cars: Car[];
}

edited Aug 4, 2017 at 4:22

answered Aug 4, 2017 at 4:17

hendrixchord

5,5045 gold badges33 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React js Typescript string array variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related